Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类选择器、字体图标、盒模型
Blogger Information
Blog 13
fans 0
comment 0
visits 6812
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
伪类选择器、字体图标、盒模型
云中
Original
397 people have browsed it

伪类选择器

  2. <ol class="olist">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <ul class="ulist">
  6.         <li>item1</li>
  7.         <li>item2</li>
  8.         <li>item3</li>
  9.         <li>item4</li>
  10.         <li>item5</li>
  11.         <li>item6</li>
  12.         <li>item7</li>
  13.         <li>item8</li>
  14.         <li>item9</li>
  15.         <li>item10</li>
  16.       </ul>
  17.       <li>item3</li>
  18.       <li>item4</li>
  19.       <li>item5</li>
  20.     </ol>
  22.     <style>
  23.       /* 第5个子元素 */
  24.       .olist > li:nth-child(5) {
  25.         color: red;
  26.       }
  27.       /* 第1个元素 */
  29.       .olist > li:first-of-type {
  30.         color: salmon;
  31.       }
  32.       /* 最后1个元素 */
  33.       .olist > li:last-of-type {
  34.         color: saddlebrown;
  35.       }
  36.       /* 奇数项 */
  37.       .ulist > li:nth-of-type(odd) {
  38.         color: seagreen;
  39.       }
  40.       /* 偶数项 */
  41.       .ulist > li:nth-of-type(even) {
  42.         color: aquamarine;
  43.       }
  44.       /* 3,6,9行 */
  45.       .ulist > li:nth-of-type(3n) {
  46.         font-weight: bold;
  47.       }
  48.       /* 第4行 */
  49.       .ulist > li:nth-of-type(4) {
  50.         font-style: italic;
  51.       }
  52.       /* 公式 an+b
  53.       a:一个循环的大小
  54.       n:计数器，从0开始
  55.       b:偏移量 */
  56.       /* 1,4,7,10 */
  57.       .ulist > li:nth-of-type(3n + 1) {
  58.         color: blue;
  59.         font-size: xx-large;
  60.       }
  61.       /* 倒数第2个元素 */
  62.       .ulist > li:nth-last-of-type(2) {
  63.         color: gold;
  64.       }
  65.     </style>
  67.     <!-- 表单伪类 -->
  68.     <div>
  69.       <input type="radio" name="sex" value="0" id="m" /><label for="m"
  70.         >男</label
  71.       >
  72.       <input type="radio" name="sex" value="1" id="f" /><label for="f"
  73.         >女</label
  74.       >
  75.     </div>
  77.     <input type="text" class="te" />
  78.     <button>按钮</button>
  79.     <style>
  80.       input:checked + label {
  81.         color: red;
  82.       }
  84.       button:hover {
  85.         background-color: indianred;
  86.         color: white;
  87.         cursor: pointer;
  88.       }
  90.       .te:focus {
  91.         background-color: gold;
  92.       }
  93.     </style>

图示：
图示

字体图标

第一步：登录 https://www.iconfont.cn/ 下载字体图标。
第二步：将压缩包解压，放到项目里。
第三步：打开压缩包中的 demo_index.html 查看使用说明。
第四步：按照使用说明添加引入代码。
第五步：用css控制引入的字体图标。

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <!-- 引入字体图标css -->
  10.     <link rel="stylesheet" href="./font_icon/iconfont.css" />
  11.   </head>
  12.   <body>
  13.     <!-- 插入图标 -->
  14.     <p><span class="iconfont icon-arrow-left"></span></p>
  15.     <!-- 用css控制字体图标 -->
  16.     <style>
  17.       .icon-arrow-left {
  18.         color: red;
  19.         font-size: xx-large;
  20.       }
  21.     </style>
  22.   </body>
  23. </html>

盒模型

常用属性：width,height,border,padding,margin

  1. <div class="box1"></div>
  2.     <div class="box2"></div>
  4.     <style>
  5.       .box1,
  6.       .box2 {
  7.         width: 200px;
  8.         height: 200px;
  9.         border: 10px dashed red;
  10.         background-color: tan;
  11.         /* 剪裁背景 */
  12.         background-clip: content-box;
  13.         /* 内边距 */
  14.         padding: 5px 10px 15px 20px;
  15.         /* 外边距 */
  16.         margin: 5px 10px 15px 20px;
  17.         /* 此时, width, heigth设置的盒子大小, 就是最终的计算尺寸 */
  18.         box-sizing: border-box;
  19.         /* 边框样式可单独设置 */
  20.         border-bottom: dotted;
  21.       }
  22.     </style>

图示：
图示

常用单位

绝对单位: px
相对单位：em rem vh vw
em:和自己或父对象的font-size绑定
rem:和html的font-size绑定
vh:视口高，用百分比
vw:视口宽，用百分比

em , rem

  2.     <div class="box"></div>
  3.     <div class="box1"></div>
  4.     <style>
  5.       html {
  6.         font-size: 20px;
  7.       }
  8.       .box {
  9.         font-size: 10px;
  10.         width: 10em;
  11.         height: 10em;
  12.         background-color: slateblue;
  13.       }
  14.       .box1 {
  15.         font-size: 10px;
  16.         width: 10rem;
  17.         height: 10rem;
  18.         background-color: yellowgreen;
  19.       }
  20.     </style>

图示：
图示

vh vw

  1. <header></header>
  2.     <aside class="left"></aside>
  3.     <main></main>
  4.     <aside class="right"></aside>
  5.     <footer></footer>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  14.       header,
  15.       footer {
  16.         background-color: burlywood;
  17.       }
  18.       main {
  19.         background-color: dodgerblue;
  20.       }
  21.       .left,
  22.       .right {
  23.         background-color: darkgray;
  24.       }
  26.       body {
  27.         display: grid;
  28.         grid-template-rows: 10vh 80vh 10vh;
  29.         grid-template-columns: 20vw 70vw 10vw;
  30.       }
  31.       header,
  32.       footer {
  33.         grid-column: span 3;
  34.       }
  35.     </style>

图示：
图示

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