Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2022年0707结构伪类与状态伪类与盒模型常用属性
Blogger Information
Blog 14
fans 2
comment 2
visits 6665
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2022年0707结构伪类与状态伪类与盒模型常用属性
西门瑶雪
Original
381 people have browsed it

1. 实例演示伪类选择器: 结构伪类与状态伪类

a、图片演示效果

伪类选择器图片演示效果

b、伪类选择器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>伪类CSS-状态伪类</title>
  8. <link rel="stylesheet" href="wcss.css">
  10. </head>
  11. <body>
  12.     <ul class="list">
  13.         <li class="num">tou0</li>
  14.         <li>tou1</li>
  15.         <li>tou2</li>
  16.         <li>tou3</li>
  17.         <li>tou4</li>
  18.         <li>tou5</li>
  19.         <li>tou6</li>
  20.         <li>tou7</li>
  21.     </ul>
  23.     <form action="">
  24. <fieldset>
  25. <legend>用户注册：</legend>
  26. <label for="name">用户名：</label>
  27. <input type="text" id="name">
  28. <br>
  29. <label for="gend">性别：
  30.     <input type="radio" value="男" checked>男
  31.     <input type="radio" alue="女">女
  32.     </label>
  34. <!---提示-->
  35. <br>
  36. <label for="tips">警告</label> <br>
  37. <input type="text" id="uname" value="一旦注册禁止修改！" style="border:none">
  39. <hr>
  40. <legend>用户注册：</legend>
  41. <label for="name">用户名：<input type="text"></label>
  42. <br><br>
  43. <button>提交</button>
  45. </fieldset>
  47.     </form>
  48. <style>
  49. button{
  50.     height:30px;
  51.     width:100px;
  52.     border:none;
  53.     background: rgb(110, 110, 180);
  54. }
  55. button:hover {background: rgb(189, 81, 81);
  56. cursor: pointer;
  57. }
  58. input:focus{background: #fae;}
  59. </style>
  61. </body>
  62. </html>

c、CSS代码

  1. /*
  2. .list > li.num{color:blanchedalmond}
  3. .list > li:nth-of-type(3){background: rgb(167, 101, 101);}
  4. .list > li:nth-of-type(7){background: rgb(32, 180, 52);}
  5. .list > li:nth-of-type(5){background: rgb(89, 16, 148);}
  6. /*
  7. an+b
  8. n，b参数从0开始递增
  9. 若不+b，则n从0开始递增
  10. **/
  11. .list > li:nth-of-type(1n+3){background: rgb(89, 16, 148);}
  12. .list > li:nth-of-type(-n+3){background: rgb(8, 127, 156);}
  13. .list > li:nth-of-type(n){background: rgb(153, 134, 134);}
  14. .list > li:nth-of-type(2n){background: rgb(153, 134, 134);}
  15. .list > li:nth-of-type(2n+1){background: rgb(153, 134, 134);}
  16. .list > li:nth-last-of-type(-n+1){background: rgb(70, 6, 6);}
  17. .list > li:first-of-type{background: rgb(163, 85, 85);}
  18. .list > li:last-of-type{background: rgb(243, 13, 13);}

2. 实例演示盒模型常用属性

a、图片显示效果

演示盒模型常用属性效果图

b、盒模型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>盒子模型</title>
  8. </head>
  9. <body>
  10.     <div class=box>box</div>
  11.     <style>
  12.         .box{
  13.             width:200px;
  14.             height: 100px;
  15.             background: rgb(146, 77, 77);
  16.             border: 5px dashed #666;
  17.             padding: 10px 10px;
  18.             margin:20px;
  19.             text-align: center;
  20.             line-height: 100px;
  21.             font-size: 22px;
  22.             color: red;
  23.             box-sizing: border-box;
  24.         }
  25.     </style>
  26. </body>
  27. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post