Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 10.21状态伪类选择器与盒模型
Blogger Information
Blog 24
fans 0
comment 0
visits 10904
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
10.21状态伪类选择器与盒模型
皮皮志
Original
332 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.        input:default {
  15.         box-shadow: 0 0 2px 1px coral;
  16.         }
  17.        input:default + label {
  18.        color: coral;
  19.        }
  20.        p.box{
  21.         width: 200px;
  22.         height: 200px;
  23.         margin: 10px;
  24.         background-color: red;
  25.         float: left;
  26.        }
  27.        p.box:empty{
  28.         background-color: blue;
  29.        }
  30.        .box{
  31.         /* 盒子的宽度 */
  32.         width: 300px;
  33.         /* 盒子的长度*/
  34.         height: 300px;
  35.         /* 盒子的边框 */
  36.         border: 5px solid black;
  37.         /* 盒子的背景色 */
  38.         background-color: pink;
  39.         /* 盒子的内边距*/
  40.         padding: 10px;
  41.        /* 盒子的外边距 */
  42.         margin: 300px auto;
  43.         /* margin 和 padding的简写规则  按照顺时针顺序 上右下左 下面只介绍margin*/
  44.         /* margin: 300px 上下左右300 */
  45.         /* margin: 300px auto; 规则 上下300 左右auto*/
  46.         /* margin: 300px 200px 300px; 规则 上300 左右200 下300*/
  47.         /* margin: 300px 200px 300px 200px 规则 上300 右200 下300 左200  */
  48.         /* 盒子的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right */
  49.         /* 盒子的宽度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom */
  50.        }
  51.     </style>
  52. </head>
  53. <body>
  54.     <!-- :default可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。 -->
  55.     <!-- 允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 :default 伪类表示 -->
  56.         <fieldset>
  57.         <legend>四季</legend>
  58.         <input type="radio" name="season" id="spring" checked>
  59.         <label for="spring">Spring</label>
  61.         <input type="radio" name="season" id="summer" checked >
  62.         <label for="summer">Summer</label>
  64.         <input type="radio" name="season" id="fall">
  65.         <label for="fall">Fall</label>
  67.         <input type="radio" name="season" id="winter">
  68.         <label for="winter">Winter</label>  
  69.     </fieldset>
  71.     <!-- :empty CSS 伪类 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。 -->
  72.     <!-- 可以看到第三个没有子元素 变蓝色了 -->
  73.     <p class="box">我是皮皮</p>
  74.     <p class="box">  </p>
  75.     <p class="box"><!--我是皮皮--></p>
  76.     <div class="box">这个是大盒子</div>
  77. </body>
  78. </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