【前端】CSS

快来打我* 2024-03-17 22:32 10阅读 0赞

####  目 录 ####

*  一.CSS 是什么
 *  二.基本语法规范
 *  三.引入方式
 *  四.选择器
 *   *  1.选择器的功能
     *  2.选择器的种类
     *  3.基础选择器
     *   *  ①.标签选择器
         *  ②.类选择器
         *  ③.id 选择器
         *  ④.通配符选择器
     *  4.复合选择器
     *   *  ①.后代选择器
         *  ②.子选择器
         *  ③.并集选择器
         *  ④.伪类选择器
 *  五.字体属性
 *   *  设置字体
     *  大小
     *  粗细
     *  文字样式
 *  六.文本属性
 *   *  文本颜色
     *  文本对齐
     *  文本装饰
     *  文本缩进
     *  行高
 *  七.背景属性
 *   *  背景颜色
     *  背景图片
     *  背景位置
     *  背景尺寸
 *  八.圆角矩形
 *  九.元素的显示模式
 *   *  块级元素
     *  行内元素
     *  行内元素和块级元素的区别
     *  改变显示模式
 *  十.盒模型
 *   *  边框
     *  内边距
     *  外边距
 *  十一.弹性布局
 *   *  常用属性：

## 一.CSS 是什么 ##

> 层叠样式表 (Cascading Style Sheets).

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

## 二.基本语法规范 ##

> 选择器 + \{一条/N条声明\}

*  选择器决定针对谁修改 (找谁)
 *  声明决定修改啥. (干啥)
 *  声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

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

> 注意:
> 
>  *  CSS 要写到 style 标签中(后面还会介绍其他写法)
>  *  style 标签可以放到页面任意位置， 一般放到 head 标签内
>  *  CSS 使用 /\* \*/ 作为注释 (使用 ctrl + / 快速切换) （CSS 不支持 // 的注释方法）

例如上述 hello world 中，把 CSS 代码写到 style 标签里，并且 style 一般在head 标签中

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

--------------------

## 三.引入方式 ##

1.  内部样式：使用 style 标签，把 CSS 嵌入到 HTML 中
2.  外部样式：创建一个单独 CSS 文件(.css)，通过 HTML 中的 link 标签，把 css 文件引入过来
3.  内联样式：直接在元素里面使用 style 属性，把对应的 CSS 内容写进来

外部样式：

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

> 文件名是啥都行，只要后缀是 .css 就行

然后在内部使用 link 连接就行了

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

> 注意：如果出现多个颜色作用在相同的声明上，那么看谁最后发挥作用，那就是谁的颜色（层叠的含义，后来的覆盖前面的）

内联样式：

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

> 不必写选择器，把样式写在哪个标签里，就是哪个标签生效

内联样式的优先级默认情况下 > 外部样式和内部样式的

--------------------

## 四.选择器 ##

### 1.选择器的功能 ###

选中页面中指定的标签元素.

### 2.选择器的种类 ###

1.  基础选择器: 单个选择器构成的

*  标签选择器
 *  类选择器
 *  id 选择器
 *  通配符选择器

1.  复合选择器: 把多种基础选择器综合运用起来.

*  后代选择器
 *  子选择器
 *  并集选择器
 *  伪类选择器

> 以上内容只是 CSS2 标准中支持的选择器, 在 CSS3 中还做出了一些补充, 后面再说补充的

### 3.基础选择器 ###

#### ①.标签选择器 ####

> 就是直接选中这一类标签，只要一写标签名，就把所有的对应标签选中了

*  能快速为同一类型的标签都选择出来.
 *  但是不能差异化选择（类似于 AOE 技能）

![在这里插入图片描述][0b35c96346ac445f807093d1f32691cc.png]  
![在这里插入图片描述][653d657f218047189186ce94171d1662.png]

#### ②.类选择器 ####

> 此处的 “类” 和 Java 中的类没关系

*  可以差异化的进行选择

例如我们希望第一个 div 和第三个 div 是绿色的

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

> 其中的 .one 中的点就是类选择器

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

运行结果也符合我们的要求。

一个类选择器，是可以被多个标签来引用的；一个标签，也可以引用多个类选择器。

![在这里插入图片描述][802003fe4df740de9315546810cb5f33.png]  
![在这里插入图片描述][70a224850161419092defbe0b0850528.png]

有了类选择器，就可以随心所欲的选择任意的对象了

> 类选择器的优先级，是比标签选择器更高！

> 注意：
> 
>  *  类名用 . 开头的
>  *  下方的标签使用 class 属性来调用.
>  *  一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
>  *  如果是长的类名, 可以使用 - 分割.
>  *  不要使用纯数字, 或者中文, 以及标签名来命名类名

#### ③.id 选择器 ####

例如让第二个选择器被选择

![在这里插入图片描述][e2d9b9ee3af04cf5b885dc7c4e59631c.png]  
![在这里插入图片描述][4430416435c14166a06563c2ec1bd6fe.png]

> id 选择器只能选中一个元素(id 值是唯一的)，类选择器是可以选中多个元素的  
>   
> id 选择器优先级 > 类选择器 > 标签选择器

*  CSS 中使用 \# 开头表示 id 选择器
 *  id 选择器的值和 html 中某个元素的 id 值相同
 *  html 的元素 id 不必带 \#
 *  id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

#### ④.通配符选择器 ####

> 特殊的情况，用来选中页面的所有元素

使用 \* 的定义，选取所有的标签

* {
     color: red;
    }

页面的所有内容都会被改成 红色，不需要被页面结构调用。

### 4.复合选择器 ###

> 把上述介绍的基础选择器进行组合

#### ①.后代选择器 ####

> 又叫包含选择器，选择某个父元素中的某个子元素。（选择某个元素里包含的一个元素）

例如下面我们只想要有序列表变为红色，无序列表还是默认的颜色，我们在 style 里就可以进行后代选择器的使用，注意中间有空格。

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

#### ②.子选择器 ####

> 和后代选择器类似，但是只能选择子标签。

*  使用大于号分割
 *  只选亲儿子, 不选孙子元素

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

> 可以看到 a 标签是蓝色的，没有被选中，它是一个孙子元素，因为蓝色是 a 是浏览器默认的颜色

#### ③.并集选择器 ####

*  通过 逗号 分割等多个元素.
 *  表示同时选中元素 1 和 元素 2
 *  任何基础选择器都可以使用并集选择器.
 *  并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

![在这里插入图片描述][416b86dddfab44d28b9b24830099a4d8.png]  
![在这里插入图片描述][b86fa4b42bd94785b17d9372723b6616.png]

#### ④.伪类选择器 ####

1.  链接伪类选择器

> a:link 选择未被访问过的链接  
> a:visited 选择已经被访问过的链接  
> a:hover 选择鼠标指针悬停上的链接  
> a:active 选择活动链接(鼠标按下了但是未弹起)

*  a:hover：

![在这里插入图片描述][b1f6cb060c14408188686c997c259813.png]  
![在这里插入图片描述][ce40365aea8a49cbbc9caa4cef2adefe.png]  
![在这里插入图片描述][4840527221e5460eb18b59deb35d6da2.png]

鼠标挨到它就会变色，变成我们设置的伪类选择器的颜色

*  a:active：

![在这里插入图片描述][0a7c995a39f641ac8894b4733bb62338.png]  
![在这里插入图片描述][ce40365aea8a49cbbc9caa4cef2adefe.png]  
![在这里插入图片描述][4840527221e5460eb18b59deb35d6da2.png]  
![在这里插入图片描述][c98c9ab051e94dffaf73c21ef6d61537.png]

--------------------

## 五.字体属性 ##

### 设置字体 ###

body {
        font-family: '微软雅黑';
        font-family: 'Microsoft YaHei';
    }

*  字体名称可以用中文, 但是不建议.
 *  多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
 *  如果字体名有空格, 使用引号包裹.
 *  建议使用常见字体, 否则兼容性不好.

### 大小 ###

*  不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
 *  可以给 body 标签使用 font-size
 *  要注意单位 px 不要忘记.
 *  标题标签需要单独指定大小

也有办法测量像素大小，一般截图都可以测量出来，只需要注意系统的等比例缩放是 100％ 就行。

### 粗细 ###

> font-weight

*  可以使用数字表示粗细.
 *  700 == bold, 400 是不变粗, == normal, lighter 是变细
 *  取值范围是 100 -> 900

### 文字样式 ###

设置倾斜

> font-style: italic;

取消倾斜

> font-style: normal;

一般是取消倾斜 （比如针对 em / i）

--------------------

## 六.文本属性 ##

### 文本颜色 ###

> 使用 color 来进行设置  
>   
> color 的写法
> 
>  *  直接写单词
>  *  使用 rgb 的形式
>  *  使用十六进制的形式

为了量化的表示一个颜色，计算机中引入了 RGB 这样的概念。

*  R：red 红色
 *  G：green 绿色
 *  B：blue 蓝色

上面的三种颜色是三原色，任何一种颜色，都可以通过三原色不同的比例来混合构成！

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

例如上述 rgb 取值范围是 0~255，表示一个字节的取值范围。

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

那我们如何知道这个颜色的 rgb 呢，取色器，就可以查看到，例如用 QQ 截图就可以查看到。

> 十六进制如何表示呢？  
>   
> ![在这里插入图片描述][d2f9efbbd90f4549aa8528d91bf452f3.png]  
>   
> 例如上面的前两位是 FF 的十进制表示就是 255，前面两个数字表示 R，中间两个数字表示 G，后面两个数字表示 B。  
>   
> 也有缩写形式（但是注意只能 AABBCC 才可以换成 ABC）  
> ![在这里插入图片描述][680fe19b72994ccb91a3bc86fae0dd65.png]

### 文本对齐 ###

> text-align: \[值\];

*  center: 居中对齐
 *  left: 左对齐
 *  right: 右对齐

### 文本装饰 ###

> text-decoration: \[值\];

*  underline 下划线. \[常用\]
 *  none 啥都没有. 可以给 a 标签去掉下划线.
 *  overline 上划线. \[不常用\]
 *  line-through 删除线 \[不常用\]

### 文本缩进 ###

> 如果要想实现首行缩进几个空格,就可以使用文本缩进属性.

> text-indent: \[值\];

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

> 在开发者工具中，选中值，按下方向键，就可以实现变大变小。在 Chrome 中的修改都是临时的，刷新页面就没了

### 行高 ###

> 行高指的是上下文本行之间的基线距离

> line-height: \[值\];

行高 = 文字高度 + 行间距

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

--------------------

## 七.背景属性 ##

### 背景颜色 ###

> background-color: \[指定颜色\];

### 背景图片 ###

> background-image: url(…);

![在这里插入图片描述][6196009541e7419685444866939428d5.png]  
![在这里插入图片描述][0b4c92b4b9484c31b1b5a104fef7fc63.png]

> 使用 background-image 默认是平铺的

### 背景位置 ###

> background-position: x y;

使用 background-repeat 设置平铺～~

*  background-repeat: repeat-y; 竖着平铺
 *  background-repeat: repeat-x; 横着平铺
 *  background-repeat: no-repeat; 不平铺

> background-position: \[值\]; 设置背景位置

background-position: center center; 水平垂直都居中

### 背景尺寸 ###

> background-size: length|percentage|cover|contain;

*  可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
 *  也可以填百分比: 按照父元素的尺寸设置.
 *  cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
 *  把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

--------------------

## 八.圆角矩形 ##

> border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

效果就是让矩阵的四角更加圆滑

--------------------

## 九.元素的显示模式 ##

### 块级元素 ###

常见的元素:

> h1 - h6  
> p  
> div  
> ul  
> ol  
> li  
> …

### 行内元素 ###

常见的元素:

> a  
> strong  
> b  
> em  
> i  
> del  
> s  
> ins  
> u  
> span  
> …

### 行内元素和块级元素的区别 ###

*  块级元素独占一行, 行内元素不独占一行
 *  块级元素，高度，宽度，内外边距，行高，都是可以控制的。行内元素，设置高度，宽度，行高，都是无效的，设置内边距都有效，外边距的话，左右外边距有效，上下外边距无效。
 *  块级元素默认的宽度，是和父元素一样宽。行内元素的话，宽度则是内容本身(里面包含的文字宽度是相关的)
 *  块级元素，内部的元素可以是块级，也可以是行内。行内元素,内部的元素只能是文本或者行内元素，不能是块级元素。

### 改变显示模式 ###

使用 display 属性可以修改元素的显示模式.

*  display: block 改成块级元素 \[常用\]
 *  display: inline 改成行内元素 \[很少用\]
 *  display: inline-block 改成行内块元素

> 常见操作都是把行内元素设为块级元素

style=“display:none” 可以让元素隐藏不显示

--------------------

## 十.盒模型 ##

*  边框 border
 *  内容 content
 *  内边距 padding
 *  外边距 margin

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

### 边框 ###

*  粗细: border-width
 *  样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
 *  颜色: border-color

支持简写, 没有顺序要求

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

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

还需要注意的是边框会撑大原有的盒子

我们还可以通过一个特殊的属性来进行设置

> box-sizing: border-box; 边框不撑大盒子

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

升级一下写法 让全局都不会撑大

*{
        box-sizing: border-box;
    }

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

边框是分成四个方向的，可以直接给四个方向都加上边框，也可以只加某一边的边框，还可以让不同的方向不同的边框

![在这里插入图片描述][3a02035a6f274283ae8a3923a5d10a58.png]  
![在这里插入图片描述][38f8bd0461004914a8f37a42a105c139.png]

### 内边距 ###

*  padding-top
 *  padding-bottom
 *  padding-left
 *  padding-right

使用padding来设置内边距。内容和边框之间的距离，只是单纯的设置距离而已,不像是边框，能设置粗细，风格，颜色。

![在这里插入图片描述][432e7629b03449c3b49e34de6b95ef50.png]  
![在这里插入图片描述][1dc43657388d45b8972260d7d14034de.png]  
![在这里插入图片描述][acdd69cfe38c40dd87d2202846c316c7.png]

上面写四行太麻烦 我们也可以缩写成一行

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

实际的效果是一样的

如果是两个数字 那就是先上下 后左右

如果是四个数字 那就是 “上右下左” 顺时针进行排列

如果是一个数字 则四个方向是一样的

> 默认情况下 内边距也会撑大盒子 得我们自己设置盒子不被撑大

### 外边距 ###

控制盒子和盒子之间的距离，可以给四个方向都加上边距

*  margin-top
 *  margin-bottom
 *  margin-left
 *  margin-right

当我们写出如下代码

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

全局效果图：

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

哈哈哈外边距图：

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

呵呵外边距图：

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

俩人合起来的边距图：

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

那么问题就来了：div 下方 margin 是 30px，p 下方 margin 是 16px，div 和 p 之间间隔的距离是多少像素呢？

难不成是合起来的 46px 吗？不是的，实际上，这两个元素的外边距是重叠起来的，实际两个元素的间隔，是两个 margin 值里的最大值，而不是相加。

上述规则是两个元素上下排列的时候如此，如果两个元素是水平方向排列，此时两个元素的实际距离，则是两个外边距的加和

外边距还可以设置元素水平居中（不是文字水平居中(text-align:center)）

> margin: 0 auto;

注意：没有垂直方向的水平居中，所以 margin: auto 0; 是无效的。

--------------------

## 十一.弹性布局 ##

### 常用属性： ###

1.  display. flex 开启弹性布局

*  被设置为 display:flex 属性的元素, 称为 flex container
 *  它的所有子元素立刻称为了该容器的成员, 称为 flex item
 *  flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

当给一个元素设为 display. flex 此时子元素就不再遵守原来的"块级元素""行内元素"的规则了，变成了弹性元素.这些元素就会按照弹性布局的规则来排列，但是不影响孙子元素。

1.  justify-content 描述的主轴上的排列方式（默认水平方向）

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

flex-start : 默认靠左排列

flex-end : 默认靠右排列

space-between: 元素之间，有空白间隙，首尾没有间隙

space-around : 元素之间和首尾都有间隙

1.  align-items 描述的侧轴上的排列方式（侧轴是和主轴垂直的方向）

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

写一串代码：

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

效果图：

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

并不好看，在 div 里加上 display: flex; ，此时里面的 span 发生了改变，此时宽度生效，span 已经不是行内元素了，高度默认和父元素一样高，也可以手动改。

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

使用弹性布局就可以更方便的实现居中效果

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

实现了水平和垂直都居中：

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

[3afa7c9204154910ad9d78a7e908c23f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/700ded092192489ea1d5397cbf506722.png
[2147be7e64f54072a4b9f9ee406d35ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/42ee54d310c44f0e9688672015969107.png
[d31bf64c1c5b4646bd6756314faa5dbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5a1e41c2bd144c89aac909de920413e2.png
[a7eff590b77748f4bfdf06f3182ac9d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1a5418db189b4364968c1176902a5bc4.png
[161b5aac58f441c8b34dc1442013636d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f13a024db63d46629372697f0e90f5e2.png
[0b35c96346ac445f807093d1f32691cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1b634785f2e6465996c0714501f3aa73.png
[653d657f218047189186ce94171d1662.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1ea58c17e1da4d3883cd0feded57bcff.png
[9a5a06b485d043bc8275210e07014051.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1cf8e26e72ed41ac8815e00e751dcbf7.png
[b35a2e97307d43eeb7c46d147e5a6866.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/759afbd7f21e46af8cb945aca62aadf3.png
[802003fe4df740de9315546810cb5f33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8c39409fa36d4180996c802a2b89b6a6.png
[70a224850161419092defbe0b0850528.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9b9f7aca89b0485e8205c2c590ae57dd.png
[e2d9b9ee3af04cf5b885dc7c4e59631c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3416838a71cc49e4a218d135cd8c762f.png
[4430416435c14166a06563c2ec1bd6fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/7cd03666c6a34651bc834cea89bbe5bb.png
[b7686358da8a4de2b8161bac0a9c84c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/177126b99e1a400f8d85f73de450a3da.png
[cdad169046314aebaae4c568f8d6337d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/80f77abd63bf4656aedf2bcdc6109421.png
[b63923042ffe4fbdaf10e9ea44eab0d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/de4d8633a31f4941a540cf8f8540f791.png
[416b86dddfab44d28b9b24830099a4d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ab85e1b637464696a57299e1b599ea55.png
[b86fa4b42bd94785b17d9372723b6616.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/986efdd7d4324be597622baedc1750e3.png
[b1f6cb060c14408188686c997c259813.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/4b39b9f5af2c41feb1736414a1a9a5e6.png
[ce40365aea8a49cbbc9caa4cef2adefe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6d53b5bfa0524c1cbd8ad59fa9be6210.png
[4840527221e5460eb18b59deb35d6da2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/970a3df730b84e118ada87d9a1e678c9.png
[0a7c995a39f641ac8894b4733bb62338.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e1878e3127484b188e469b4906550b98.png
[c98c9ab051e94dffaf73c21ef6d61537.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d2e2abe679d848309d241a45658dd6a5.png
[c264a1ff5dca405f98ab5bcc79fbe05a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8842fa2b0643499e8c1c7450c272222c.png
[37500e1a38a84534b410bac712388b74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/7cbce17ac201411ab7d4486ee8a8fd55.png
[d2f9efbbd90f4549aa8528d91bf452f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5cdb2beed0cc456ab03cdd598029e042.png
[680fe19b72994ccb91a3bc86fae0dd65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c4ddd2fe0b244987bb6c9a2e0fd5b3f0.png
[0b3bea87dbd541919f0ddd4af8f1d183.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e357553236004ad0bea0b05b7600ddd2.png
[44a682d646b64c18b94fa5c151a691ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1d677031254f4627b7be8f7b10385b44.png
[6196009541e7419685444866939428d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c12006e6730a4b728cb41090df52d236.png
[0b4c92b4b9484c31b1b5a104fef7fc63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3649451f4e09418ea1f3968fa1804506.png
[ff8654924ea24118a6dd2aa7b149321b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bc3edc2cb7f347449b984cfc88a4db06.png
[53ea018bdc5a4b17b43349b31a988ece.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9767f474965e42d897fa4e1d5c569475.png
[6e56a88e5c914b7db65fefef6fa05425.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/42018c83246c4a23a7483fb891e41a6f.png
[54e4954b6ba34a2cae8e9408b29f87bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/76cd0058c6504b4db6bb3c187515d516.png
[6ebe4a859cb94c399477062fa165391f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/342f8295833b48f99b31f0040687f73a.png
[3a02035a6f274283ae8a3923a5d10a58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6204b6f3d77847838768f2c0bbcfca6c.png
[38f8bd0461004914a8f37a42a105c139.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/049bcf1635fe40b6862abe6854c7eb23.png
[432e7629b03449c3b49e34de6b95ef50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e6d8b32555554ebeb7bdb36cb1635532.png
[1dc43657388d45b8972260d7d14034de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d85c6a39ec38409f95570c711354f6a9.png
[acdd69cfe38c40dd87d2202846c316c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bbf53c34e6554ee2ae9d5d48a5507de6.png
[254bdc4fc1614c33a8dfed1f64e9026d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b13a09b135ae4a72a9d63a745e99df07.png
[f80cc6c7d2ad4a0d9717ce32c7491e6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/dbbf10fd99cf4480b60023adfdb5062f.png
[e68a4f89e3104a9299a87798440ad3a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b946e17e1abb490c8824c680a2a890c0.png
[6e149dfaac2440edbe4364c18300e56d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ea6a5939083b48bf81001f821d5f011a.png
[49c6cdd18da14dcd8a08cee45a25c56b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/4ee1595f7d414758be1a8a97ad8b5f54.png
[cb94c93300dc4ab989093db8ece26eac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5a9946d711274182bd55ee87493b671c.png
[cbdc9516badd47aeaec8ef186a3c962b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bdb173a4e59b486287205fd00059db4c.png
[fd78b3b6f80344fb8ee6287b88cb2c4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/872da2b727c74e67a573cfa12d920ead.png
[d9736e25b848469fb166b1654e25139e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8db51b88273d448ca308e87aa2000d32.png
[14664f02700e48d086e39e7fb3c52e9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5c9475b609434419aecd1af02b8a8c8a.png
[da0145aed8ef413bb84a29dffc4ac82d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c820c1c3facf4c0ead2dace4b181e9f4.png
[dbed9d3603da464e90d4598acab02d83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5fc0a065bc60423a9c46d5aa5c923c8e.png
[d6481d09177c4a93ba5fb5e854abf1fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/128df4f6ef10411085b926b7a91644c7.png