css伪类

html代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="css/zuoye.css">
  9. </head>
  10. <body>
  11. <ul id="listone">
  12. <li>1-item</li>
  13. <li>2-item</li>
  14. <li>3-item</li>
  15. <li>4-item</li>
  16. <li>5-item</li>
  17. <li>6-item</li>
  18. <li>7-item</li>
  19. <li>8-item</li>
  20. <li>9-item</li>
  21. </ul>
  22. <form action="" class="biaodan">
  23. <fieldset>
  24. <legend>用户注册</legend>
  25. <label>用户名 :
  26. <input type="text" name="name"/>
  27. </label>
  28. <br>
  29. <label class="tip">温馨提醒 :
  30. <input type="text" disabled name="name" value="用户名不能为空,并且为中文"/>
  31. </label>
  32. <br/>
  33. <div class="xingbie">
  34. <label for="box">性别:</label>
  35. <input type="radio" name="sex" id="box" value="0" checked /><label for="box"></label>
  36. <input type="radio" name="sex" id="girl" value="1" /><label for="girl"></label>
  37. </div>
  38. <button>提交</button>
  39. </fieldset>
  40. </form>
  41. </body>
  42. </html>

css代码如下

  1. <!--zuoye.css-->
  2. /* 结构伪类 */
  3. /* 获取第一个元素 */
  4. #listone>li:nth-of-type(1){
  5. background-color: chocolate;
  6. }
  7. /*获取2和5元素*/
  8. #listone>li:nth-of-type(-3n+5){
  9. background-color: aqua;
  10. }
  11. /*获取最后3个元素*/
  12. #listone>li:nth-last-of-type(-n+3){
  13. background-color: yellow;
  14. }
  15. /* 状态伪类 */
  16. input:disabled,.tip{
  17. color: red;
  18. border: none;
  19. outline: none;
  20. width: 100%;
  21. }
  22. input:checked+label{
  23. color: red;
  24. }
  25. button,button:hover{
  26. border: none;
  27. outline: none;
  28. }
  29. button{
  30. background-color: darkgreen;
  31. color: white;
  32. }
  33. button:hover{
  34. color: red;
  35. }

演示效果

演示效果

盒模型

盒模型代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>盒模型</title>
  8. </head>
  9. <body>
  10. <div class="box"></div>
  11. <p>宽度尺寸计算:padding-left-width+padding-right-width+border-left-width+border-right-width+width</p>
  12. <p>宽度总尺寸332px</p>
  13. <p>高度尺寸计算:padding-top-height+padding-botton-width+border--top-height+border-botton-width+height</p>
  14. <p>高度总尺寸332px</p>
  15. <style>
  16. .box{
  17. width: 300px;
  18. background-color: yellowgreen;
  19. border: 1px solid;
  20. height: 300px;
  21. padding: 15px;
  22. margin: 15px;
  23. }
  24. </style>
  25. </body>
  26. </html>

演示效果

演示效果

更多相关文章

  1. Android日记之2012/02/13——Android中Button点击效果
  2. Android学习笔记(8) - GridView与ImageView
  3. Android(安卓)浮动视图效果 第三种实现方式
  4. Android新的menu实现——ActionMode
  5. android二维图形翻转效果
  6. android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果
  7. Android(安卓)滑动效果入门篇(一)—— ViewFlipper
  8. Android(安卓)ScrollView中的组件设置android:layout_height="fi
  9. EditText获取焦点框的颜色改变

随机推荐

  1. 报错pymysql.err.DataError: (1406, "Dat
  2. 请教用sql loader导入数据,最后一位是整数
  3. JDBC连接并使用mysql数据库
  4. SQL Server 2008使用sproc中的函数
  5. 如何在ACCESS中接收SQL SERVER返回结果集
  6. 脚本与SQL Server中的表并发运行
  7. logstash-jdbc-input与mysql数据库同步
  8. 求查询成绩表中两门科成绩90分以上的学生
  9. SQL Server Reporting Services图表查询
  10. Python将MySQL表数据写入excel