search

博客列表 >2022年0707结构伪类与状态伪类与盒模型常用属性

2022年0707结构伪类与状态伪类与盒模型常用属性

西门瑶雪
西门瑶雪原创
2022年07月07日 22:34:03380浏览

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>
上一条：CSS样式优先级和权重和常用选择器代码演示下一条：CSS盒子模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多