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

更多相关文章

  1. HTMLa标签,img标签配合三种列表标签写出图片导航演示
  2. 注册效果与简易后台界面演示如何用html代码来写
  3. 2022年0705表单与后台框架轻量级开发演示
  4. 2022年0705表单与后台框架轻量级开发演示
  5. html简单导航与简洁课程表代码演示
  6. Android(安卓)学习系列 - 线程模型
  7. 实例演示获取dom元素的二个重要方法
  8. 2022年7月php学习心得·第二节课程
  9. 0701作业markdown常用语法的使用和演示

随机推荐

  1. android定位个人当前位置
  2. 安卓隐藏标题栏状态栏 ,实现全屏效果
  3. Android程序意外终止问题
  4. Android核心分析之二十一Android应用框架
  5. Android/iOS 和js的交互的兼容性写法
  6. Android Dialog背景全透明无边框 Theme S
  7. Android SDK各版本源码
  8. bugly镜像地址,可以下载android sdk的插件
  9. android 菜单实例
  10. android机器人学习网