search

博客列表 >伪类选择器+盒子模型属性

伪类选择器+盒子模型属性

P粉116103988
P粉116103988原创
2022年07月10日 21:26:17318浏览

伪类选择器

效果图如下：

代码如下：

  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. <style>
  10.     div{
  11.         font-size:1em;
  12.     }
  13.     /* 选中第二个li */
  14.     .list >li:nth-of-type(2){
  15.         color: red;
  16.     }
  18.     .list >ol>li{
  19.         font-size:0.5em;
  20.         color: blueviolet;
  21.     }
  22.     /* 选中后3个LI */
  23.     .list > li:nth-last-of-type(-n+3){
  24.         color: blue;
  25.     }
  26.     /* 奇数行 */
  27.     .list >li:nth-of-type(2n-1){
  28.         color:palevioletred;
  29.     }
  30.     input:disabled{
  31.         color: red;
  32.         border: none;
  33.     }
  34.     input:checked + label{
  35.         color: blue;
  36.     }
  37.     button{
  38.         border: none;
  39.         background-color: green;
  40.         font-size: 1em;
  41.         color: aliceblue;
  42.         padding: 5px;
  43.         width: 60px;
  44.     }
  45.     button:hover{
  46.         background-color: red;
  47.         cursor: pointer;
  48.     }
  49. </style>
  50. <body>
  51.     <div class="text1">
  52.         <ul class="list">
  53.             <li class="first">item1</li>
  54.             <li>item2</li>
  55.             <li>item3</li>
  56.             <ol>
  57.                 <li>zi1</li>
  58.                 <li>zi2</li>
  59.                 <li>zi3</li>
  60.             </ol>
  61.             <li>item4</li>
  62.             <li>item5</li>
  63.             <li>item6</li>
  64.             <li>item7</li>
  65.             <li>item8</li>
  67.         </ul>
  68.     </div>
  69.     <div class="text2">
  70.        <form action="">
  71.             <legend>用户注册</legend>
  72.             <div>
  73.                 <label for="user">姓名：</label>
  74.                 <input type="text" id="user" class="username" placeholder="请输入您的姓名">
  76.             </div>
  77.             <div>
  78.                 <label for="zy">注意：</label>
  79.                 <input type="text" id="zy" value="用户名必须实名" disabled>
  81.             </div>
  82.             <div>
  83.                 <label for="m">学历：</label>
  84.                 <select name="xl" id="">
  85.                     <option value="0" disabled >请选择</option>
  86.                     <option value="1">中学</option>
  87.                     <option value="2">大学</option>
  88.                 </select>
  89.             </div>
  90.             <div>
  91.                 <label for="m">性别:</label>
  92.                 <input type="radio" name="sex" id="m" value="0" checked />
  93.                 <label for="m">男</label>
  94.                 <input type="radio" name="sex" id="wm" value="1" />
  95.                 <label for="wm">女</label>
  96.               </div>
  97.             <button>提交</button>
  98.         </form>
  99.     </div>
  100. </body>
  101. </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.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         /* 盒模型常用属性：padding,margin,border等 */
  16.         .text1{
  17.             width: 150px;
  18.             height: 150px;
  19.             background-color: pink;
  20.             padding: 5px 10px 5px 8px;
  21.         }
  22.         .text2{
  23.             background-color: rgb(158, 231, 158);
  24.             border: 5px solid #000;
  25.             border-radius: 5px;
  26.             height: 100px;
  27.             line-height: 100px;
  28.             width: 100px;
  29.             text-align: center;
  30.             margin-top: 15px;
  31.             margin-left: 15px;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="text1">
  37.         <div class="text2">div</div>
  38.     </div>
  40. </body>
  41. </html>
上一条：引入字体图标和自定义样式与媒体查询下一条：媒体查询和字体图标使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多