简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >伪类选择器+盒模型+icon的使用方法+百分比设置元素大小

伪类选择器+盒模型+icon的使用方法+百分比设置元素大小

qwq
qwq原创
2021年07月06日 18:39:25585浏览

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

伪类选择器介绍（常用）

伪类选择器展示图（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>

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

上一条：固定定位及传统三行三列布局练习下一条：简单的3行3列布局和固定定位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多