赶进度简写，但源码不能减，赶上就好了

伪类选择器介绍（常用）

伪类选择器展示图（1）

源码

  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.   </head>
  9.   <!-- :nth-of-type(5)是第5个选择  -->
  10.   <!-- :last-of-type是底部选择 -->
  11.   <!-- :first-of-type是顶部选择 -->
  12.   <style>
  13.     .five > li:nth-of-type(5) {
  14.       background: rgb(212, 75, 75);
  15.     }
  16.     .five > li:first-of-type {
  17.       background: rgb(136, 69, 223);
  18.     }
  19.     .five > li:last-of-type {
  20.       background: rgb(69, 118, 223);
  21.     }
  22.   </style>
  23.   <body>
  24.     <ul class="five">
  25.       <li>浅忆好帅1</li>
  26.       <li>浅忆好帅2</li>
  27.       <li>浅忆好帅3</li>
  28.       <li>浅忆好帅4</li>
  29.       <li>浅忆好帅5</li>
  30.       <li>浅忆好帅6</li>
  31.       <li>浅忆好帅7</li>
  32.       <li>浅忆好帅8</li>
  33.       <li>浅忆好帅9</li>
  34.     </ul>
  35.   </body>
  36. </html>

伪类选择器展示图（2）

源码

  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.   </head>
  9.   <!-- :nth-of-type(n + 3) n代表以下属性都选择，从上往下数，第3个以后都会选择上 -->
  10.   <!-- :nth-of-type(-n + 3)n代表以上属性都选择，从上往下数，第3个以后都会选择上 -->
  11.   <style>
  12.     .five > li:nth-of-type(n + 3) {
  13.       background: rgb(1, 132, 255);
  14.     }
  15.     .five > li:nth-of-type(-n + 3) {
  16.       background: rgb(1, 255, 77);
  17.     }
  18.   </style>
  19.   <body>
  20.     <ul class="five">
  21.       <li>浅忆好帅1</li>
  22.       <li>浅忆好帅2</li>
  23.       <li>浅忆好帅3</li>
  24.       <li>浅忆好帅4</li>
  25.       <li>浅忆好帅5</li>
  26.       <li>浅忆好帅6</li>
  27.       <li>浅忆好帅7</li>
  28.       <li>浅忆好帅8</li>
  29.       <li>浅忆好帅9</li>
  30.     </ul>
  31.   </body>
  32. </html>

伪类选择器展示图（3）

源码

  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.   </head>
  9.   <!-- :nth-last-of-type是底部选择 -->
  10.   <!-- :nth-first-of-type是顶部选择 -->
  11.   <!-- :nth-last-of-type(3)从底部数第三个 -->
  12.   <!-- :nth-last-of-type(n+3)从底部数第三个,以上属性都属于他 -->
  13.   <!-- :nth-last-of-type(-n+3)从底部数第三个,以下属性都属于他 -->
  14.   <style>
  15.     .five > li:nth-last-of-type(n + 3) {
  16.       background: rgb(1, 255, 77);
  17.     }
  18.     .five > li:nth-last-of-type(-n + 3) {
  19.       background: rgb(229, 255, 0);
  20.     }
  21.   </style>
  22.   <body>
  23.     <ul class="five">
  24.       <li>浅忆好帅1</li>
  25.       <li>浅忆好帅2</li>
  26.       <li>浅忆好帅3</li>
  27.       <li>浅忆好帅4</li>
  28.       <li>浅忆好帅5</li>
  29.       <li>浅忆好帅6</li>
  30.       <li>浅忆好帅7</li>
  31.       <li>浅忆好帅8</li>
  32.       <li>浅忆好帅9</li>
  33.     </ul>
  34.   </body>
  35. </html>

icon的使用方法

展示图

源码

  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>icon的使用的方法</title>
  8.     <link rel="stylesheet" href="/0701/font-icon/iconfont.css" />
  9.     <style>
  10.       .icon-user {
  11.         color: rgb(207, 47, 247);
  12.         font-size: 2em;
  13.       }
  14.       .icon-gongyi {
  15.         color: rgb(28, 240, 255);
  17.         font-size: 2em;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <h3></h3>
  23.     <span class="iconfont icon-user"></span>
  24.     <span class="iconfont">&#xe98f;</span>
  25.     <span class="iconfont icon-gouwuche"></span>
  26.     <span class="iconfont icon-wo">个人</span>
  27.   </body>
  28. </html>

盒模型

展示图

源码

  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.       .box {
  10.         height: 160px;
  11.         width: 200px;
  12.         display: inline-block;
  13.         border: 5px solid skyblue;
  14.         padding: 5px;
  15.         margin: 30px;
  16.         /* box-sizing: border-box;最常用 */
  17.         box-sizing: content-box;
  19.         /* 盒模型常用属性
  20.       1. width
  21.       2. height
  22.       3. border
  23.       4. padding
  24.       5. margin
  26.       box-sizing: 改变了盒子大小的计算方式 */
  28.         /* 
  29.       box-sizing: border-box; 计算盒子大小时,将内边距与边框全部计算在内
  30.       所以, width,height就是最终大小, 从而简化布局 */
  32.         /* 实现所有元素样式的初始化 */
  33.         /* * {
  34.         padding: 0;
  35.         margin: 0;
  36.         box-sizing: border-box;
  37.       } */
  38.         /*       
  39.       display: inline-block;
  40.       默认块元素，可将块变成内联元素 */
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="box">浅忆好帅</div>
  46.     <div class="box">浅忆好帅</div>
  47.   </body>
  48. </html><!DOCTYPE html>
  49. <html lang="zh-CN">
  50.   <head>
  51.     <meta charset="UTF-8" />
  52.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  53.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  54.     <title>盒模型</title>
  55.     <style>
  56.       .box {
  57.         height: 160px;
  58.         width: 200px;
  59.         display: inline-block;
  60.         border: 5px solid skyblue;
  61.         padding: 5px;
  62.         margin: 30px;
  63.         /* box-sizing: border-box;最常用 */
  64.         box-sizing: content-box;
  66.         /* 盒模型常用属性
  67.       1. width
  68.       2. height
  69.       3. border
  70.       4. padding
  71.       5. margin
  73.       box-sizing: 改变了盒子大小的计算方式 */
  75.         /* 
  76.       box-sizing: border-box; 计算盒子大小时,将内边距与边框全部计算在内
  77.       所以, width,height就是最终大小, 从而简化布局 */
  79.         /* 实现所有元素样式的初始化 */
  80.         /* * {
  81.         padding: 0;
  82.         margin: 0;
  83.         box-sizing: border-box;
  84.       } */
  85.         /*       
  86.       display: inline-block;
  87.       默认块元素，可将块变成内联元素 */
  88.       }
  89.     </style>
  90.   </head>
  91.   <body>
  92.     <div class="box">浅忆好帅</div>
  93.     <div class="box">浅忆好帅</div>
  94.   </body>
  95. </html>

百分比设置大小

展示图

源码

  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.       /* vh=占据屏幕高度的百分比 */
  10.       /* vw=占据屏幕宽度的百分比 */
  11.       .container {
  12.       }
  13.       header {
  14.         height: 10vh;
  15.         width: 90vw;
  16.         background-color: rgb(139, 238, 130);
  17.       }
  18.       main {
  19.         height: 80vh;
  20.         width: 90vw;
  21.         background-color: rgb(209, 233, 71);
  22.       }
  23.       footer {
  24.         height: 10vh;
  25.         width: 90vw;
  26.         background-color: rgb(142, 35, 241);
  27.       }
  28.       /* 100 - (10+10) = 80 */
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="container">
  33.       <header>页眉</header>
  34.       <main>主体</main>
  35.       <footer>页脚</footer>
  36.     </div>
  37.   </body>
  38. </html>

哪里不对请多多指教！！！
您将可能改变我的一生！！
勇敢浅忆，不怕困难！！！

更多相关文章

  1. 简单表单与css选择器实战案例
  2. 8.【商城后台管理系统】单点登陆和单一登陆的区别与实现原理案例
  3. 【记账小程序】收入和支出首页展示与数字键功能、编辑后端分类列
  4. 【PHP动态分页】composer自动加载机制和第三方验证码库的使用以
  5. 源码解析容器底层cgroup的实现
  6. Matlab仿真模拟的4个非常基础！！实例（附源码）
  7. 日产汽车源码遭泄露
  8. Redux从设计到源码
  9. 面试官：你分析过线程池源码吗？

随机推荐

  1. 分享一个xml字符串通过dom4j解析的方法
  2. src下xml等资源文件无法读取的问题在IDEA
  3. 分享一个简单的rss阅读工具
  4. 相对Python RSS服务说明
  5. 使用FeedTools解析RSS代码示例
  6. 使用Ruby和Nokogiri模拟爬虫导出RSS种子
  7. C#对XML读写的代码实例
  8. XmlSlurper解析RSS的实例代码
  9. C#中通过xpath查找xml的指定元素的代码实
  10. php读取XML的四种方法实例详解