CSS层叠样式表

素颜马尾好姑娘i 2024-03-26 11:57 13阅读 0赞

#### CSS ####

*  作用
 *  如何在 html 页面中添加 css 样式
 *  CSS 选择器
 *  颜色赋值方式
 *  背景图片
 *  文本和字体相关的样式
 *  display:元素的显示方式
 *  盒子模型
 *   *  盒子模型之 Content 内容
     *  盒子模型之 Margin 外边距
     *  盒子模型之边框 border
     *  盒子模型之内边距 padding
     *  部分标签会带盒子模型中的某些样式
 *  CSS 三大特性
 *  居中相关
 *  定位
 *   *  静态定位
     *  相对定位
     *  绝对定位
     *  固定定位
     *  浮动定位
 *  溢出设置
 *  显示层级
 *  行内元素垂直对齐方式 vertical-align

## 作用 ##

![在这里插入图片描述][571e2ed33782472d96a0bca6429d325b.png]

## 如何在 html 页面中添加 css 样式 ##

![在这里插入图片描述][58692ade901c4c35b063de45ee4314d4.png]  
![在这里插入图片描述][bd714d3033c0488ea22addcfea93f224.png]

## CSS 选择器 ##

![在这里插入图片描述][3288e3c8793749d999b885d8ec2b9eca.png]  
![在这里插入图片描述][a879b28d3ac84c94b936f5bf7fe1fa42.png]  
![在这里插入图片描述][f0016343fba84be695fc5be7df42d6f6.png]  
![在这里插入图片描述][5438d4e8869c45b5871f359fdc193172.png]  
![在这里插入图片描述][075663f09887442bb0be85c4d72a72b1.png]  
![在这里插入图片描述][d97b6e4e87a84c0f890a7fb854e7b2fa.png]  
![在这里插入图片描述][c65c5eae8121447387577926eddb1830.png]  
![在这里插入图片描述][5d10bfaf0e584d82a09c5abbd195839f.png]  
![在这里插入图片描述][9b170c90751b4249ae397f6c316adefb.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
      <style>
        /* id 选择器 */
        #bx {
          
          color: blue;
        }
        /* 类选择器 */
        .c1 {
          
          color: green;
        }
    
        /* 分组选择器 */
        h1, #bx, .c1 {
          
          background-color: yellow;
        }
    
        /* 属性选择器 */
        input[type='text'] {
          
          color: red;
        }
        input[type='password'] {
          
          color: blue;
        }
    
        /* 任意元素选择器 */
        * {
          
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
    <input type="text">
    <input type="password">
    <h1>这是h1</h1>
    <p id="bx">冰箱</p>
    <p class="c1">洗衣机</p>
    <div>苹果</div>
    <div class="c1">香蕉</div>
    </body>
    </html>

## 颜色赋值方式 ##

![在这里插入图片描述][195f76f682ff4b60b6b31fa59fc4f007.png]  
![在这里插入图片描述][3df01ca8af224524995c9bc288c7ea2f.png]

## 背景图片 ##

![在这里插入图片描述][7a0ae83e8c03447ab0b0ada82dac4525.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        h1 {
          
          color: red;
          color: #00ff00;
          color: #00f;
          color: rgb(255,0,0);
          color: rgba(255,0,0,0.5);
        }
    
        #d1 {
          
          width: 200px;
          height: 200px;
          background-color: purple;
          /* 设置图片 */
          background-image: url("../b.png");
          /* 设置图片大小 */
          background-size: 100px 100px;
          /* 禁止重复 */
          background-repeat: no-repeat;
          /* 设置背景图片位  横向偏移值  纵向偏移值 */
          background-position: 50px 100px;
          /* 通过百分比控制位置 */
          background-position: 50% 50%;
        }
    
        #d2 {
          
          width: 611px;
          height: 376px;
          background-color: #e8e8e8;
          background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
          background-repeat: no-repeat;
          background-size: 318px 319px;
          background-position: 90% 70%;
        }
    
        #d3 {
          
          width: 375px;
          height: 376px;
          background-color: #e8e8e8;
          background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
          background-repeat: no-repeat;
          background-size: 292px 232px;
          background-position: 80% 85%;
        }
      </style>
    </head>
    <body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    
    <div></div>
    
    <h1>颜色测试</h1>
    </body>
    </html>

## 文本和字体相关的样式 ##

![在这里插入图片描述][c8a764f88bc74dbe9d3b17207233a4ef.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        div {
          
          width: 200px;
          height: 50px;
          border: 1px solid red;
          /* 水平对齐方式 */
          text-align: center;
          /* 文本修饰    overline 上划线       underline 下划线      line-through 删除线  */
          text-decoration: line-through;
          /* 多行文本可以控制行间距， 单行文本可以控制垂直居中 */
          line-height: 50px;
          /* 文本阴影：颜色 x偏移值 y偏移值 浓度(值越小，越清晰) */
          text-shadow: red 10px 10px 3px;
          /* 字体大小 */
          font-size: 30px;
          /* 字体加粗 */
          font-weight: bold;
          /* 斜体 */
          font-style: italic;
          /* 设置字体 */
          font-family: cursive;
        }
    
        h1 {
          
          /* 去掉加粗 */
          font-weight: normal;
          /* 设置字体大小和字体 */
          font: 20px cursive;
        }
    
        a {
          
          /* 去掉下划线 */
          text-decoration: none;
        }
      </style>
    </head>
    <body>
    <h1>这是h1</h1>
    <a href="">超链接</a>
    <div>文本和字体相关</div>
    </body>
    </html>

## display:元素的显示方式 ##

![在这里插入图片描述][1040f4831e804a749b6b938084891dfe.png]  
![在这里插入图片描述][6a107883a79444aeb3f6fbf908063ae2.png]  
![在这里插入图片描述][442dfa8fc3bb4e25b90e3747d9993044.png]  
![在这里插入图片描述][17f9c52aa8f04a178c766d86624ebaa1.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
      <style>
        div {
          
          width: 100px;  /* 默认宽度为上级元素的宽度 */
          height: 100px;   /* 默认高度为内容高度 */
          border: 1px solid red;
        }
    
        span {
          
          border: 1px solid blue;
          /* 行内元素默认宽高为内容宽高，不能通过 width/height 修改宽高 */
          width: 100px;
          height: 100px;
          /* 如果必须修改行内元素的宽高需要将显示方式改成块级或行内块 */
          display: inline-block;
        }
    
        img {
          
          width: 100px;
          height: 100px;
          display: none;   /* 隐藏元素 */
        }
    
        a {
          
          color: white;
          width: 132px;
          height: 40px;
          display: block;
          line-height: 40px;
          /* 设置圆角 */
          border-radius: 3px;
          text-align: center;
          text-decoration: none;
          background-color: #0aa1ed;
        }
      </style>
    </head>
    
    <body>
    <a href="">查看详情</a>
    
    <img src="../b.png">
    <img src="../b.png">
    <img src="../b.png">
    
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    </body>
    </html>

## 盒子模型 ##

![在这里插入图片描述][0465ee8ff0fd40fa812c91e963b989e1.png]  
![在这里插入图片描述][0e71376cdc6f4fe7ba8c0f94666fe52d.png]  
![在这里插入图片描述][43a64f40cc864c9fab2ca77a07e9c72d.png]  
![在这里插入图片描述][470097b6c2944d50a40aafe885147342.png]  
![在这里插入图片描述][5d58b50f6108427a8dbd85dda384cea7.png]

### 盒子模型之 Content 内容 ###

![在这里插入图片描述][897aac518ac2403381d94b1da62dd697.png]  
![在这里插入图片描述][30e661cbde0e43739e828469a0bcab45.png]  
![在这里插入图片描述][b884e19323444e1bb2d4baa7929847f8.png]

### 盒子模型之 Margin 外边距 ###

![在这里插入图片描述][6bc925a6e0ca40a7bc6550183084cb55.png]  
![在这里插入图片描述][0457de344a0b403db5c31b1d94f7bf4e.png]  
![在这里插入图片描述][9baa72b32175470d8c6ab4949544ae4a.png]  
![在这里插入图片描述][50a6d5c7c89042b4a388360ecab32981.png]

### 盒子模型之边框 border ###

![在这里插入图片描述][35551bca0c65412b920bea9c91c52202.png]  
![在这里插入图片描述][6b92ef357d51488cb14cf53f9b8c3a2d.png]

### 盒子模型之内边距 padding ###

![在这里插入图片描述][dabfc59701d645808983fcffe67aea21.png]  
![在这里插入图片描述][24c157a0b9b14f2cabcf912c7ecc1a2c.png]  
![在这里插入图片描述][4d8e40fc39844ffb8649317997dc410a.png]

### 部分标签会带盒子模型中的某些样式 ###

![在这里插入图片描述][ef882a662a6644b2ad1dcee3eda542c6.png]  
![在这里插入图片描述][79991a52845f40099581414687458379.png]  
![在这里插入图片描述][671f40adee8541fa81164b1eddf80281.png]  
![在这里插入图片描述][84fa5c188e3a42a09970468c053f1b81.png]

## CSS 三大特性 ##

![在这里插入图片描述][e11cfa54dc5a4509bd3476e4a46d67a3.png]  
![在这里插入图片描述][a044dbd483c84aef8d5255d8b63c18ef.png]  
![在这里插入图片描述][965ab3d3c5ae49a292661bc5b128f549.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三大特性</title>
    
      <style>
        div {
          
          color: red;
        }
        p {
          
          /* important 将样式的优先级提升到最高 */
          color: green !important;
        }
        #p1 {
          
          color: blue;
        }
      </style>
    </head>
    <body>
    <p id="p1">p1</p>
    <div>
      div
      <p>p2</p>
      <span>span</span>
      <a href="">超链接</a>
    </div>
    </body>
    </html>

## 居中相关 ##

![在这里插入图片描述][b505d404c56a40c88926af0ce3387701.png]  
![在这里插入图片描述][c82c076fb70547888485ed5f8e5e6de3.png]  
**注意:**  
**元素设置为行内元素，会受上级元素 text-align: center 影响,如果设置的时块级元素，元素自身不会受到上级元素 text-align: center 影响，元素会继承上级元素的 text-align: center 让元素的内容居中，如果需要单独让块级元素自身居中的话，需要通过外边距 margin: 0 auto 来设置居中**

## 定位 ##

![在这里插入图片描述][c58fc6b54f2c45bab2c1d9d2e2c918bc.png]

### 静态定位 ###

![在这里插入图片描述][570a300b5d9544d4a7662f0e70611e18.png]

### 相对定位 ###

![在这里插入图片描述][0fe68b2293b045cdb192ab1d6611547f.png]

### 绝对定位 ###

![在这里插入图片描述][fad04e370c874b37b5c331a248717bca.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
    
      <style>
        div {
          
          width: 100px;
          height: 100px;
          border: 1px solid red;
        }
    
        #d1 {
          
          /* 设置绝对定位 */
          position: absolute;
    
          /* 元素相对于窗口做偏移 */
          right: 0;
          top: 0;
        }
    
        #big {
          
          width: 200px;
          height: 200px;
          background-color: red;
          margin: 100px 0 0 100px;
          position: relative;   /* 以当前元素为参照物 */
        }
    
        #big > div {
          
          width: 100px;
          height: 100px;
          background-color: green;
          margin: 50px 0 0 50px;
        }
    
        #big > div > div {
          
          width: 50px;
          height: 50px;
          background-color: blue;
          position: absolute;
          left: 0;
          top: 0;
        }
      </style>
    </head>
    <body>
    
    <div id="big">
      <div>
        <div></div>
      </div>
    </div>
    
    <div id="d1">div1</div>
    <div>div2</div>
    <div>div3</div>
    </body>
    </html>

### 固定定位 ###

![在这里插入图片描述][4fee5afbe1c34501bb859f769092b0ed.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
    
      <style>
        #d1 {
          
          width: 1000px;
          height: 100px;
          background-color: red;
          /* 设置固定定位 */
          position: fixed;
          top: 0;
          left: 0;
        }
    
        body {
          
          padding-top: 100px;  /* 让 body 里的内容往下移动 100px */
        }
    
        #d2 {
          
          width: 50px;
          height: 200px;
          background-color: blue;
          position: fixed;
          right: 40px;
          bottom: 50px;
        }
      </style>
    </head>
    <body>
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <img src="../b.png" alt="">
    <img src="../b.png" alt="">
    <img src="../b.png" alt="">
    <img src="../b.png" alt="">
    <img src="../b.png" alt="">
    <img src="../b.png" alt="">
    <img src="../b.png" alt="">
    </body>
    </html>

### 浮动定位 ###

![在这里插入图片描述][8675b7ff1efb4e689b64a8baeed72d61.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动定位</title>
    
      <style>
        body > div {
          
          width: 200px;
          border: 1px solid red;
            /* 当元素的所有子元素全部浮动后，元素自动识别的内容高度为 0，
               这样会导致后面的元素顶上来，最终呈现出异常的效果，
               给元素添加 overflow: hidden
            */
            overflow: hidden;
        }
    
        #d1 {
          
          width: 50px;
          height: 50px;
          background-color: red;
            float: right;
        }
    
        #d2 {
          
          width: 50px;
          height: 50px;
          background-color: green;
            float: right;
        }
    
        #d3 {
          
          width: 50px;
          height: 50px;
          background-color: blue;
            float: right;
        }
    
      </style>
    </head>
    <body>
    <div>
      <div id="d1"></div>
      <div id="d2"></div>
      <div id="d3"></div>
    </div>
    </body>
    </html>

## 溢出设置 ##

![在这里插入图片描述][ea33330b0aa84a0f9e6b873bd3684070.png]

## 显示层级 ##

![在这里插入图片描述][fe024743d9c944ebba3b2a061843ed5e.png]

## 行内元素垂直对齐方式 vertical-align ##

![在这里插入图片描述][e2984e2712f04e0394c9b377de441728.png]

[571e2ed33782472d96a0bca6429d325b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f257562bbba84d0cab6d25e47e0957b3.png
[58692ade901c4c35b063de45ee4314d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/96fbf31be87b47fbafa7c93dec13c658.png
[bd714d3033c0488ea22addcfea93f224.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4d2a8da2169a44f6973b88298886a300.png
[3288e3c8793749d999b885d8ec2b9eca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/248c7807871a433c8b7b8fca7f4c3700.png
[a879b28d3ac84c94b936f5bf7fe1fa42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/431ac9e5d9a74382ac65a3fbea82f6e1.png
[f0016343fba84be695fc5be7df42d6f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/30fcf87d6ffa40c98408fa61b8eeabb0.png
[5438d4e8869c45b5871f359fdc193172.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/110d83b8b03e404ca3a3548f97bd12dc.png
[075663f09887442bb0be85c4d72a72b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/253b277f4f2f4c0e93144e44de8ae9f6.png
[d97b6e4e87a84c0f890a7fb854e7b2fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d2f22cda64334f1ca5358d01abd341e3.png
[c65c5eae8121447387577926eddb1830.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a53a735e558942f1b8e7bf904f6908e6.png
[5d10bfaf0e584d82a09c5abbd195839f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ab4f1195c04344e19452db8010d03a43.png
[9b170c90751b4249ae397f6c316adefb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3385243592b040afa7e7c81d7f13781f.png
[195f76f682ff4b60b6b31fa59fc4f007.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5628e61177924ecd8d13bdb415eecd37.png
[3df01ca8af224524995c9bc288c7ea2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/692b8bcb2d5b4e069ddc77c5d11913b6.png
[7a0ae83e8c03447ab0b0ada82dac4525.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c4318bd2d03249c3ac347bb1c20a60f5.png
[c8a764f88bc74dbe9d3b17207233a4ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/05bffd099bb5421d91327c0f9bac7f33.png
[1040f4831e804a749b6b938084891dfe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/400e4eaed849448984005abac03d80d6.png
[6a107883a79444aeb3f6fbf908063ae2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6c34015377404eb997671eced5a733ce.png
[442dfa8fc3bb4e25b90e3747d9993044.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cd8cd5f64e004417922df087c8712610.png
[17f9c52aa8f04a178c766d86624ebaa1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a521a384069d4f27bb801661675b8433.png
[0465ee8ff0fd40fa812c91e963b989e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/595558aafa034c3cb91a3251a55b3ade.png
[0e71376cdc6f4fe7ba8c0f94666fe52d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/dcaf962320ee4e91b4d732a792479db6.png
[43a64f40cc864c9fab2ca77a07e9c72d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3042aa3e4fb74d1e8dfe6bbf22cb4424.png
[470097b6c2944d50a40aafe885147342.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/52cdcb7e932a43a8ab74a9644ba5aab4.png
[5d58b50f6108427a8dbd85dda384cea7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0bed705d85a3425f92c0c3a253dbc71d.png
[897aac518ac2403381d94b1da62dd697.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8c44e24cc8b6467dae6b28b22c923d91.png
[30e661cbde0e43739e828469a0bcab45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/df2563dc7d7a4b5c95e377ad6868d0cd.png
[b884e19323444e1bb2d4baa7929847f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/42f39d76be2f4ca6b0696c3b11c8239c.png
[6bc925a6e0ca40a7bc6550183084cb55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6a0de082dc134632aa78d008c592c34a.png
[0457de344a0b403db5c31b1d94f7bf4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0671fae627964b5f9ecd43c1d707b306.png
[9baa72b32175470d8c6ab4949544ae4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/877b5d7b47cd47b88514a9f9667b1376.png
[50a6d5c7c89042b4a388360ecab32981.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c7347f92c0244fe0891e04e02401338e.png
[35551bca0c65412b920bea9c91c52202.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4e123ae73e2a4278a071d55c43b9f0dd.png
[6b92ef357d51488cb14cf53f9b8c3a2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4d5bd21b393940ec8ecb6ad8d409097a.png
[dabfc59701d645808983fcffe67aea21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4a8e0434173649799b11698ae5e2bbe8.png
[24c157a0b9b14f2cabcf912c7ecc1a2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b1c9ddf22d10489cb3a1868dcbf71cff.png
[4d8e40fc39844ffb8649317997dc410a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/63d83578383d46b1945799c83e88f07c.png
[ef882a662a6644b2ad1dcee3eda542c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c4f4122f43c149e482b733d36fe49fe3.png
[79991a52845f40099581414687458379.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c028b0cc20d74edabfe937e4d63ced29.png
[671f40adee8541fa81164b1eddf80281.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c87886cf897e4948b628e45ce528f15e.png
[84fa5c188e3a42a09970468c053f1b81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fd34143ce91f43b48fb9d7ec9814984d.png
[e11cfa54dc5a4509bd3476e4a46d67a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/91d8c08aac9248c6b982cf08113d87fe.png
[a044dbd483c84aef8d5255d8b63c18ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/462bb3474371464bab5035361dd90a10.png
[965ab3d3c5ae49a292661bc5b128f549.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0234a09baf144396969e119d2e82ba31.png
[b505d404c56a40c88926af0ce3387701.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d18985240c9b40fd96b44d073ebfbe5c.png
[c82c076fb70547888485ed5f8e5e6de3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2ba65f3ef7034a8382759be82175d27a.png
[c58fc6b54f2c45bab2c1d9d2e2c918bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4ce35fa109334f81a569d65c597f6a91.png
[570a300b5d9544d4a7662f0e70611e18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4e737efa614a424a95f31a7a375e7ec2.png
[0fe68b2293b045cdb192ab1d6611547f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/838a7e5ebb044301a955fcf2a42114fb.png
[fad04e370c874b37b5c331a248717bca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6601e8e949834f69a109fddea92ef330.png
[4fee5afbe1c34501bb859f769092b0ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6913962d59b54a2cb8efda8808e5d38e.png
[8675b7ff1efb4e689b64a8baeed72d61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/395e5f695e0c4c4597fa2d118cc023b3.png
[ea33330b0aa84a0f9e6b873bd3684070.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ef869d5869f34fc2a89d9c57e6620c96.png
[fe024743d9c944ebba3b2a061843ed5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4940eccc3e04457186a0073b8a86a757.png
[e2984e2712f04e0394c9b377de441728.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0ce0884c66bb47e78d7a13d2d0faffc3.png