CSS概述及基本语法[web前端]

Bertha 。 2024-04-07 14:14 92阅读 0赞

### 1 css概述 ###

网页分为三部分：

1.  结构(HTML)
2.  表现(CSS)
3.  行为(JavaScript)

早期在没有css以前，html都是靠下边这些标签修饰的，用html来修饰网页非常麻烦，需要用到大量的标签，为了解决这个问题，就诞生了css语言，专门用作修饰网页内容

CSS(Cascading Style Sheets)：级联样式表(又称为：层联样式表)

*  是一种样式表语言，用于为HTML文档控制外观，定义布局。eg：字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。

*  可将页面的内容与表现形式分离，页面内容存放在HTML文档中，用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

网页实际是一个多层的结构，通过css可以为网页中的每一层设置样式，我们最终看到的只是最上面的一层，总而言之，css就是用来设置网页中元素的样式的。

### 2 基本语法 ###

#### 1.行级样式表(也称内联样式表)：在标签行内修饰 ####

*  我们通过举例来说明如何使用行级样式表来修改元素的样式：

<p style="color: red;font-size: 20px;">
        我是一个段落，我的颜色和大小是使用行级样式表修饰的。
    </p>

效果：![70e477044dee48fc85315dcd1a27c9d9.png][]

*  style属性中的内容都是css的内容，css中的声明和html中的属性一样，都是名值对的形式
    
     *  名和值之间用:隔开，使用;结尾。

*  行级样式表一般在优先级最高时使用，因为如果在多个同样的使用场景下就要重复写，麻烦且不够高级

eg：

*  这种情况下就需要用到下面的内嵌样式表，将几种使用相同样式修饰的标签分为一类

#### 2.内嵌样式表 ####

*  将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                /* 此标签内写的都是css语法 */
                .a1{
                    color: blue;
                    font-size: 20px;
                }
                .a2{
                    color: coral;
                    font-size: 15px; 
                }
            </style>
        </head>
        <body>
             <a href="#" class="a1">我是一个链接，我的颜色和大小是使用内嵌样式表修饰的。</a>
             <a href="#" class="a1">我是一个链接，我的颜色和大小是使用内嵌样式表修饰的。</a>
             <a href="#" class="a2">我是一个链接，我的颜色和大小是使用内嵌样式表修饰的。</a>
             <a href="#" class="a2">我是一个链接，我的颜色和大小是使用内嵌样式表修饰的。</a>
        </body>
    </html>

效果：![4f37dbd2b139488191df5ca5e0b4bbb3.png][]

#### 3.外部样式表 ####

*  将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

![baf6e4e3ea744caf863daa26e6d6abfe.png][]

![d7f9d40c138e4a27825e46e99ad98fa8.png][]

### 3 选择器 ###

因为CSS样式和HTML页面中的标签是分离的，我们需要将样式和标签联系起来，就需要通过选择器实现。

#### **3.1 标签选择器** ####

*  根据标签名来选择页面中的所有指定标签
 *  语法：标签名 \{ 样式表 \}
 *  eg：p\{\}，h1\{\}，div\{\}

实际代码举例：

#### 3.2 类选择器 ####

*  根据元素的class属性值匹配，表示一组，可以有多个标签属于一组，从而具有相同的样式。
 *  语法：.class属性值\{ 样式表 \}

实际代码举例：

#### 3.3 id选择器 ####

*  通过标签的id属性值选中唯一的一个标签
 *  语法：\#id属性值 \{ 样式表 \}

实际代码举例：

#### 3.4 通配选择器 ####

*  可以用来选中页面中的所有的标签
 *  语法：\*\{\}

#### 选择器组合 ####

*  可以将公共的样式写进来
 *  语法：选择器1,选择器2,选择器N\{\}

注意：

1.  *当一个标签被多个选择器选中时，会显示优先级高的样式*
2.  *优先级从高到低：id >类 >标签 >通配选择器*

### 4 文本,背景,列表,伪类,透明 ###

#### 4.1 文本 ####

*  color：字体颜色
 *  font-size：字体大小
    
     *  eg：16px (px：像素单位，css中必须加单位)
 *  font-family：字体
    
     *  eg：楷体、宋体等
 *  text-align：文本内容对齐
    
     *  注意：只能让文本内容对齐
     *  如果设置文本居中，这里的居中指的只是水平方向的居中，我们如果想要垂直方向也居中，就要通过line-height属性将我们的行高设置到和文字占据的块或者是行一样高。
 *  font-weight：设置字体粗细
 *  text-decoration：设置对文本的修饰
    
     *  line-through：表示穿过文本的一条线(删除线)
     *  underline：下划线
     *  none：定义标准的文本
        
         *  可以用来去除超链接默认的下划线
 *  font-style: italic：斜体文本
 *  line-height：设置行高
 *  letter-spacing：可以指定字符间距
 *  word-spacing：设置每个单词之间的间距
 *  text-indent：设置首行缩进
    
     *  建议使用单位em(表示当前一个文本中一个文字尺寸大小)，假如我们使用单位px，那么在修改了字体大小的时候，缩进的大小也需要改变，这样来回修改就很麻烦，所以建议直接使用em。

#### 4.2 背景 ####

1.  background-color：背景颜色
2.  background-image：背景图片(优先级高于背景颜色)
    
     *  默认情况下设置的背景图片是可重复的，如果一张图片不足以将背景完全填充，那么就会重复产生几个照片对没有完全填充的部分进行填充，如果我们不想填充，可以通过background-repeat:no-repeat属性设置为不重复，这个时候即使我们的图片不足以将背景完全填充时，也不会产生重复照片去填充。
3.  background-repeat：设置背景是否可重复
4.  background-size：设置背景尺寸(宽和高)
5.  background- position：设置背景位置
    
     *  可以设置四个值：left，right，top，bottom(也可以左上，右上这样组合设置)

#### 4.3 列表 ####

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。

1.  **list-style-image：将图象设置为列表项标志。**
    
     *  样式值的格式为url(图片地址)
2.  **list-style-position：设置列表中列表项标志(图标)的位置。**
    
     *  样式值可以设置为：inside、outside
        
         *  设置为inside代表图标在列表项里
         *  设置为outside代表图标在列表项外面
3.  **list-style-type：设置列表项标志的类型。**
    
     *  设置为none就表示去除默认图标
     *  设置为circle就表示图标为圆圈

总结： 可以对上面三条进行一个简写(list-style：简写属性)

eg：list-style:none url() inside;

*  注意：这三个样式之间没有先后顺序
    
     *  一般都是位置才有先后顺序，并且一般都是顺时针顺序(上右下左)，对于为位置我们如果只指明一个，那就是上右下左都是这个值，如果指明两个，就是上下为第一个值，左右为第二个值，如果指明三个，就是上为第一个值，左右为第二个值，下为第三个值，如果指明四个，就是对应上右下左。

#### 4.4 伪类 ####

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类 。

伪类的语法：

:hover 选择鼠标悬停在上面的元素  
:active 选择鼠标在上面并且按键按下不松手的元素  
:focus 输入标签获得鼠标焦点时状态

#### 4.5 透明度 ####

css中设置透明度有两种方式：rgba和opacity

**1.grba**

*  语法：rgba(R,G,B,A);
 *  rgba只是单纯的设置颜色的透明度，但是标签上的文字不会透明，即透明元素的子元素不会继承其透明效果。

案例：

<html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #p1{
                    background-color: rgba(255, 255, 0, 1);
                }
                #p2{
                    background-color: rgba(255, 255, 0, 0.2);
                }
            </style>
        </head>
        <body>
            <p id="p1">这是一个段落，这是一个段落</p>
            <p id="p2">这是一个段落，这是一个段落</p>
        </body>
    </html>

效果：

![933a1a9fb14547389b3e6b825b8b171b.png][]

**2.opacity**

*  用来设置标签的透明度。
 *  语法：opacity：value;
 *  value取值： 0.0 (完全透明)到 1.0(完全不透明)。
 *  opacity属性具有继承性，因此会使得容器中所有的元素都具有透明度，所以我们设置的字体也会边透明。

案例：

<html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .a1{
                    opacity: 1;
                }
                .a2{
                    opacity: 0.5;
                }
                
            </style>
        </head>
        <body>
            <div class="a1">
                <img src="img/背景.jpg"/>
                <span>这是一个span标签</span>
            </div>
            <div class="a2">
                <img src="img/背景.jpg"/>
                <span>这是一个span标签</span>
            </div>
        </body>
    </html>

效果：

### ![8523f2dbfe88426d82af50623c612653.png][] ###

### 5 标签分类 ###

#### 5.1 块级标签 ####

*  会自动换行的标签，无论内容有多少，都会独占一行
 *  此类标签可以设置宽高
 *  默认的大小：**宽**与body一样，高与内容一样，如果没有内容高度为0

例如：<p>、<h1>、<ul>、<ol>、<hr/>等

#### 5.2 行级标签 ####

*  只占自身大小的标签，不会占一行
 *  不能设置宽高

例如：<font>、<b>、<i>、<a>等。

#### 5.3 行级块标签 ####

*  可以设置大小，但是不占一行

例如：<input/> <img>等。

注意：

1.  一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
    
     *  因为块级标签主要用来布局，行级标签主要用来文字选中。
2.  a可以包含任何标签，除去a本身；
    
     *  比如用超链接把图片包裹起来
3.  p标签不可以包含任何的块标签。

### 6 display属性 ###

*  用来修改标签的类型

可选值：

display：inline ：设置标签为行级标签
             block ：设置标签为块标签 
             none ：隐藏标签（标签将在网页中完全消失，不占空间）       
             inline-block ：设置标签为行级块标签

### 7 div和span ###

#### 7.1 div标签 ####

*  块级标签，可以包含任何标签(行内元素、块级元素都行)
 *  没有默认样式，定义什么样式就变成什么样子。
    
     *  比如可以通过css样式来设置自身的宽度(没有定义宽度时，div标签的宽度为容器的100%)，高度，以及标签之间的距离(内边距和外边距)
 *  主要的作用是用来进行网页布局，是一个纯净版的块级标签

#### 7.2 span标签 ####

*  行级标签，标签内只能添加行内元素的标签或文本，不能容纳块级元素

*  没有任何默认样式宽度
    
     *  高度无法通过css样式设置、它的宽高受其本身内容控制，随着内容的宽高改变而改变
     *  span标签可以设置左右的外边距和内边距，但是上下的外边距和内边距无法设置
 *  span标签主要用来选中文本，然后修饰文本

### 8 盒子模型 ###

CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里，如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子，我们只需要将相应的盒子摆放到网页中相应的位置，即可完成网页的布局。

盒子模型：

![1f2cc62a37af4bcfa68fcfa3a8546989.png][]

#### **一个盒子我们会分成几个部分：** ####

1.  内容区(content)
    
     *  内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签放置于内容区中
     *  当一个标签没有内边距、边框，那么内容区大小就是标签的大小
     *  通过width和height两个属性设置的是内容区的大小而不是整个盒子的大小
     *  width和height属性只适用于块标签(包含行级块)
2.  内边距(padding)
    
     *  内边距指的是内容区到边框之间的距离
     *  内边距会影响整个盒子的大小，使用padding属性来设置标签的内边距。
        
        代码示例：
        
            padding-top: 10px;/*设置内容区与上方边框的距离*/
            padding-bottom: 10px;/*设置内容区与底部边框的距离*/
            padding-left: 10px;/*设置内容区与左边框的距离*/
            padding-right: 10px; /*设置内容区与右边框的距离*/
            padding:10px 20px 30px 40px; /*设置标签上、右、下、左(顺时针)四个方向的内边距*/
            padding: 10px; /*上下左右边距都一样时可以这样简写*/
            
            图示：
    
    加padding: 10px 后效果图：![265d981f0d27439295270a28fed52f6f.jpeg][]
3.  边框(border)
    
     *  标签的最外层，会影响标签的大小
     *  使用border属性设置盒子的边框
     *  边框样式： dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)
        
        border-radius：设置四个角为圆角边框
        
        border-top-left-radius：设置左上为圆角边框
        
            border:1px red solid; 
            /* 分别指定了边框的宽度、颜色和样式 */ 
            /* 也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框 */
4.  外边距(margin)
    
     *  外边距是标签距离另一个标签之间的距离，不影响标签的
     *  不影响标签的大小，但是会影响标签的位置，标签所占的空间会改变
     *  使用margin属性可以设置外边距，用法和padding类似
     *  可以通过margin-top/lift/right/bottom这些属性修饰
        
            /* 上下不能给auto，只能给具体的值 */
            margin-top: 10px;
            margin-bottom: 10px;
            /* 组合使用可使标签居中 auto(外边距最大化)*/
            margin-left: auto;
            margin-right: auto;
        
        (margin: 10px auto;) 效果：![42d016217c564f0a9ca955ec7a4bf047.jpeg][]

注意：

*  标签整体大小 = 内容区 + 内边距 + 边框

### 9 清除浏览器的默认样式 ###

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的，所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

*{ 
        margin: 0; 
        padding: 0; 
    }

### 10 文档流--浮动,定位 ###

网页是一个多层的结构，一层叠加一层。

*  我们通过css可以分别为每一层来设置样式
 *  用户只能看到最顶上的一层，这些层最下面的一层我们就称之为文档流
    
     *  文档流是网页的基础

更通俗的说文档流就是标签在网页中默认的排放顺序，将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签。

*  文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
 *  这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

图示：

![c3baaeb994884bfc836b138a58281e4b.png][]

**因此，我们要进行网页的布局，就必须打破这一默认排放规则。**

**那么怎么打破网页的默认排放规则呢？**

1.  浮动
2.  定位

### 11 浮动 ###

#### 11.1 浮动概述 ####

浮动指的是使标签脱离原来的文档流，在父标签中浮动起来，浮动使用float属性。

可选值：

none ：不浮动 
    left ：向左浮动 
    right ：向右浮动

块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标签；当一个块级标签浮动后，**宽度会默认是内容的宽度**，所以当漂浮一个块级标签时我们都会为其指定一个宽度。

*  当一个标签浮动以后，其下方的标签会上移。
 *  浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置，标签浮动以后不会再影响父标签的高度，也就是浮动标签不会撑开父标签。

#### 11.2 清除浮动 ####

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left ： 忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                /* 外边的盒子如果不设置宽度，默认宽度就是浏览器宽度，已经是居中状态，
                   所以要想使内容居中，就要给外边的盒子设置宽度，然后再调整margin属性使内容居中 */
                .nav_box{
                    background-color: antiquewhite;
                    width: 750px;
                    margin: auto;
                }
                .nav{
                    float: left;
                    background-color: palegreen;
                    width: 150px;
                    padding: 10px 0px;
                    text-align: center;
                }
                .content_box{
                    width: 750px;
                    margin: auto;
                    margin-top: 10px;
                }
                .content_box_left{
                    background-color: pink;
                    float: left;
                    width: 200px;
                    height: 400px;
                }
                .content_box_center{
                    background-color: aqua;
                    float: left;
                    width: 334px;
                    height: 400px;
                    margin: 0px 8px;
                }
                .content_box_right{
                    background-color: pink;
                    float: left;
                    width: 200px;
                    height: 400px;
                }
                .content_box_bottom{
                    background-color: aquamarine;
                    height: 40px;
                }
            </style>
        </head>
        <body>
            <div class="nav_box">
                <div class="nav">首页</div>
                <div class="nav">公司介绍</div>
                <div class="nav">产品案例</div>
                <div class="nav">公司新闻</div>
                <div class="nav">联系我们</div>
                
                <div style="clear: left;"></div>
            </div>
            <div class="content_box">
                <div class="content_box_left">left</div>
                <div class="content_box_center">center</div>
                <div class="content_box_right">right</div>
                <div style="clear: left;"></div>
                <div class="content_box_bottom">底部</div>
            </div>
        </body>
    </html>

图片解释：![896cc4fcd64842f4813e90dbb7e3e2d5.jpeg][]

![62fdae931de142b4892e69ca925b28b7.jpeg][]

![6ee13aac4e534fa589e902c8e02826a4.jpeg][]

![60989d6fc07341f58ebce3780b2db702.jpeg][] 最终效果：![f8ba421ba69143aea43aca5cfa10d32f.jpeg][]

### 12 定位(Position) ###

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

*  需要有参照物 比如：自己、其他标签、父标签、浏览器本身

#### 12.1 相对定位(relative) ####

*  移动时，是以自己本身的位置为参照物的(也就是它的**起点**)进行移动，移动后，原来的空间还被占用。
 *  通过position:relative; 开启相对定位，left right top bottom四个属性来设置标签的偏移量。

**相对定位的特点：当标签的position属性设置为relative时，则开启了标签的相对定位**

1.  当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.  相对定位是相对于标签在文档流中原来的位置进行定位
3.  相对定位的标签不会脱离文档流

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .box1{
                    width: 100px;
                    height: 100px;
                    background-color: palegreen;
                    /*开启相对定位*/
                    position: relative; 
                    left: 100px;
                }
                .box2{
                    width: 100px;
                    height: 100px;
                    background-color: paleturquoise;
                }
            </style>
        </head>
        <body>
            <div class="box1">box1</div>
            <div class="box2">box2</div>
        </body>
    </html>

效果：![87ee2139a7e647e0b161471126c94064.jpeg][]

#### 12.2 绝对定位 ####

*  绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。

*  可以通过position: absolute; 开启绝对定位， left right top bottom四个属性来设置标签的偏移量

**绝对定位的特点：**

1.  开启绝对定位，会使标签脱离文档流，也就是使标签上升一个层级
2.  开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.  参照物：相对于离他最近的开启了定位的祖先标签进行定位(一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位)，如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位，**一般情况，开启了一个标签的绝对定位，都会开启父级标签的相对定位。**
4.  绝对定位会改变标签的性质，行级标签变成块标签

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .box1{
                    width: 100px;
                    height: 100px;
                    background-color: aqua;
                    position: absolute;/*开启了绝对定位*/
                    left: 100px;
                    top: 100px;
                }
                .box2{
                    width: 100px;
                    height: 100px;
                    background-color: red;
                }
                .box3{
                    width: 200px;
                    height: 200px;
                    background-color: palegreen;
                    position: relative;
                }
            </style>
        </head>
        <body>
            <div class="box3">box3
                <div class="box1">box1</div>
            </div>
            <div class="box2">box2</div>
        </body>
    </html>

图片说明：![a54668851ca6400fb0243bd02d45a583.jpeg][]

![0ccfcdc3ccec4a69a23eec4cd37172d3.jpeg][]

![93274f7c4759427885ab416a91c8e978.jpeg][]

![2f2f0f1a9cb04c5d9d9e3b4d80b23f2b.jpeg][]

![ae46fb5f161e44b1a2ddb08aa5724b00.jpeg][]

[70e477044dee48fc85315dcd1a27c9d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/68fa30f1d1474833b2d29d92056b873b.png
[4f37dbd2b139488191df5ca5e0b4bbb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9ba4f8b8faab490ba07651a81a9e978b.png
[baf6e4e3ea744caf863daa26e6d6abfe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ad4432d26dbd42aebe067d42272620bb.png
[d7f9d40c138e4a27825e46e99ad98fa8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a1828128fe864f6383c8f28c6398829a.png
[933a1a9fb14547389b3e6b825b8b171b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/58b4bdb413b44b5d8e289fa736a03cf7.png
[8523f2dbfe88426d82af50623c612653.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c73400acb4ff402181f3f91541683b8d.png
[1f2cc62a37af4bcfa68fcfa3a8546989.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0ceb2cd4333d43b6970ef822728523e1.png
[265d981f0d27439295270a28fed52f6f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/41499a80f6f249e6977f9c933b7842a1.jpeg
[42d016217c564f0a9ca955ec7a4bf047.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ec9a82315c5b47f5bf0b3b5e40193fd8.jpeg
[c3baaeb994884bfc836b138a58281e4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/75931ff0dfd043708679e3ac4cc1f758.png
[896cc4fcd64842f4813e90dbb7e3e2d5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/08a358f7bbd0497c8d4451bb8c3ed490.jpeg
[62fdae931de142b4892e69ca925b28b7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/eb8ca60cf049425882473c4872f928eb.jpeg
[6ee13aac4e534fa589e902c8e02826a4.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/84c5d24e42de4567821941d300f3804e.jpeg
[60989d6fc07341f58ebce3780b2db702.jpeg]: https://img-blog.csdnimg.cn/60989d6fc07341f58ebce3780b2db702.jpeg
[f8ba421ba69143aea43aca5cfa10d32f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/548f460efbbc4b598ad14146fa44e4c1.jpeg
[87ee2139a7e647e0b161471126c94064.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a08c8f0951114048bfdad0268a39f6ea.jpeg
[a54668851ca6400fb0243bd02d45a583.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/edf1ae86dacc415294dede6c5d06e6f1.jpeg
[0ccfcdc3ccec4a69a23eec4cd37172d3.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/88882a01fbc044128a72e9a3bdd09da8.jpeg
[93274f7c4759427885ab416a91c8e978.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b5bd808a094c436ba25211f4c4185aca.jpeg
[2f2f0f1a9cb04c5d9d9e3b4d80b23f2b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5e3d8d264c474454a1b5e223d0730e07.jpeg
[ae46fb5f161e44b1a2ddb08aa5724b00.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/49089c6435ee404598235e56f5d69e65.jpeg