保姆级教程 CSS 知识点梳理大全，超详细！！！

男娘i 2022-09-13 14:26 159阅读 0赞

## 保姆级教程 CSS 知识点梳理大全，超详细！！！ ##

> ✴️**大家好,我是王同学，好久不见，趁着假期王同学把CSS 知识点梳理了一遍**  
> ✴️**如果对你有帮助就给我点个赞吧，这样我们就互不相欠了**  
> ✴️**星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起加油吧**

## 一、前端三层 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16]

## 二、CSS的书写位置 ##

## (一)、内嵌式 ##

*  内嵌式，顾名思义，内嵌在.html文件中
 *  在`<head></head>`标签中，书写 `<style></style>`标签对，里面书写CSS语句。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][5577d71b521a4d4c9bc8c1fce447a004.png]

## (二)、外链式 ##

*  可以将CSS单独存为.css文件，然后用link标签引入它
 *  外链式的优点：多个HTML文件，可以共用一个CSS样式表文件

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][17bfd5a6253445d5afeac87fd23cf9e0.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16]

## (三)、 导入式 ##

导入式是最不常见的样式表导入方法,使用导入式引入文件，不会等待CSS文件加载完毕，而是会立即渲染HTML结构

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 3]

## (四)、行内式 ##

行内式： 样式可以直接通过style属性写在标签上，行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
![在这里插入图片描述][cd2ebefaab87482b85f3046db60f9316.png]

## 三、CSS选择器 ##

### 首先我们来介绍传统的CSS2.1 选择器 ###

## （一）、标签选择器 ##

标签选择器：又称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有的标签

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 5]

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
标签选择器的覆盖面非常大，所以通常用于标签的初始化  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 8]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16]

## （二）、id选择器 ##

*  标签可以有id属性，它是这个标签的唯一标识
 *  id的命名只能由字母、数字、下划线、短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
 *  同一个页面上不能有相同的id标签
 *  CSS选择器可以使用\#井号选择指定的id标签

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 9]

## （三）、类选择器 ##

*  class属性表示类名
 *  类名的命名规范和id的命名规范相同
 *  我们使用点.前缀来指定class的标签
 *  class类名十分灵活，多个标签可以为相同的类名
 *  同一个标签可以同时属于多个类，类名用空格隔开

![在这里插入图片描述][e9f10e5391974fe186dd3172c3af68f6.png]  
![在这里插入图片描述][4705ee3acbb3459ca935123be91dc6cf.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 10]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16]

## 在开发中我们也用到过原子类，这里简单的介绍一下 ##

## （四）、原子类 ##

*  在做网页前、可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。
 *  在HTML标签就可以“则需选择”它的类名，这样可以非常快速的添加一些常见的样式

![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 12]

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16]

## （五）、复合选择器 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16]

## 后代选择器 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 13]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 14]

## 交集选择器 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 15]

## 并集选择器 ##

并集选择器也叫做分组选择器，逗号表示分组

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 16]

## （六）、伪类选择器 ##

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 17]

## a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题 ##

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

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/866c6e88022c4c288f3ee78a8b74c6e0.png?x-oss-process=image/watermark,type\_ZHJ][https_img-blog.csdnimg.cn_866c6e88022c4c288f3ee78a8b74c6e0.png_x-oss-process_image_watermark_type_ZHJ]

## （七）、元素关系选择器 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 18]

## （七）、子选择器 ##

当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 19]

## （八）、相邻兄弟选择器 ##

*  相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
 *  说白了，a+b就是选择紧跟在a后面的一个b  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 20]

## (九）、通用兄弟选择器（~） ##

通用兄弟选择器（`~`）,`a~b`选择a元素之后所有同层级b元素![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 21]

## （十）、序号选择器 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 22][]

## （十一）、：first-child ##

first-child表示选择第一个子元素，比如下面的例子就是表示选择.box盒子中的第一个p  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 23]

## (十二)、：last-child ##

：last-child表示选择最后一个子元素，比如下面的例子  
![在这里插入图片描述][fbdaf8f056cd4a66901e4e17c8e108d2.png]

## （十二）、： nth-child() ##

**： nth-child()可以选择任意序号的子元素**  
![在这里插入图片描述][9817b52349c140928ac548684d0b0011.png]  
：nth-child()可以写成 an+b的形式，表示从b开始每个a选一个

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 24]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 25]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 26]

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

## （十三）、序号选择器的兼容性 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16]

## （十四）、属性选择器 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 27]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 
            [alt]  有这个属性
            [alt ="背景故宫"] 精准匹配
            [alt ^="abc"] 开头位置匹配
            [alt $="abc"]  结尾位置匹配
            [alt *="abc"]  任意位置匹配
            [alt |="abc"]    abc-开头
            [alt ~="abc"]  abc为空格分开的独立部分
            
            */
            
            img { 
                width: 300px;
            }
            
            img[alt^="北京"] { 
                border: 5px solid purple;
            }
            
            img[alt$="夜景"] { 
                border: 5px solid rgb(236, 184, 12);
            }
            
            img[alt*="美"] { 
                border: 5px solid rgb(52, 5, 138);
            }
            
            img[alt |="参赛作品"] { 
                border: 5px solid rgb(224, 228, 9);
            }
            
            img[alt~="手机拍摄"] { 
                border: 5px solid pink;
            }
        </style>
    </head>
    
    <body>
        <img src="images/bj/0.jpg" alt="北京故宫">
        <img src="images/bj/1.jpg" alt="北京鸟巢">
        <img src="images/bj/2.jpg" alt="北京十七孔桥">
    
    
        <img src="images/wx/0.jpg" alt="参赛作品-无锡体育场">
        <img src="images/wx/1.jpg" alt="手机拍摄 无锡太湖">
        <img src="images/wx/2.jpg" alt="无锡美景">
        <img src="images/wx/3.jpg" alt="无锡夜景">
    
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 28]

## （十五）、CSS3新增伪类 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 1]

![在这里插入图片描述][1d917aee62ca4a808803e6d422086f57.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][d3d9384e0372447bb871ce3ecf75d08e.png]  
![在这里插入图片描述][dfc9e045b27d469a869a561e570ee8d3.png]  
![在这里插入图片描述][e6ba1bf03c7540168c64896f8cc30540.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 29]  
![在这里插入图片描述][1404d884498043f595df751f054a00b9.png]  
![在这里插入图片描述][6f85e9d83a334174a0e167a9c54051cb.png]

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

![在这里插入图片描述][d8d0e65e8e5f4daeb8ef9245b4d6f818.png]  
![在这里插入图片描述][2df2d1147b8d4641b8b37da26bc1f435.png]

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

## （十六）、伪元素 ##

CSS3新增了伪元素特性，顾名思义，表示虚拟动态创建的元素  
伪元素用双冒号表示，IE8可以兼容单冒号

## ：：before ##

![84f974fbe5c547a2b8ffc189e59493a7.png][]

## ：：after ##

![请添加图片描述][10d8070e9a284982a65f5dcf1d5d9c03.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 30]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 2]

## （十七）、：：selection ##

![在这里插入图片描述][87bd9f409f9b44029b0ab427af7d7a6b.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 31]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16]

## （十八）、：：first-letter和：：first-line ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 32]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 33]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 1]

## 三、层叠性和选择器权重的计算 ##

*  CSS全名叫做“层叠样式表”，层叠性是他很重要的性质
 *  层叠性：多个选择器可以同时作用于同一个标签，效果叠加  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 1]  
    如果多个选择器的定义有冲突呢？CSS有严密的处理规则

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_9_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][18cc8bb928074277a4e5b2d96a30b184.png]  
![在这里插入图片描述][827c31551976470c8ee4adb80ebccd11.png]

## 复杂选择器的计算 ##

复杂选择器可以通过（ID的个数，class的个数，标签的个数）的形式，计算权重  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 34]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 35]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 36]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 1]

## 四、文本与字体属性 ##

## （一）、常用的文本字体属性 ##

*  color属性可以设置文本内容的前景色
 *  color属性主要用于英语单词、十六进制、rgba()、rgb() 等表示方法
 *  用英语单词表示法，比如：color：red；仅仅用于学习时临时设置一下颜色，工作时不用这样的形式，因为追求精确。

## （二）、十六进制表示法 ##

十六进制表示法是所有设计软件中常用的颜色表示方法，设计师给我们的设计上面标注的图标颜色，通常为十六进制  
![在这里插入图片描述][a52cd9bbc72e414ea3d88ade59957df4.png]  
![在这里插入图片描述][ed606c30568648fc8e4709c7b9bea41c.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 37]

## （三）、rgb() 表示法 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 38]

## （四）、rgba()表示法 ##

颜色可以使用rgba（） 表示法，最后一个参数表示透明度，介于0-1之间，0表示纯透明，1表示纯实心  
![41a98634e8b04c509bd22513154b52dc.png][]

## （五）、font-size属性 ##

font-size属性用来设置字号，单位为px 后面还会说到em和rem

网页文字正文字号通常是16px浏览器最小支持10px  
![在这里插入图片描述][65012c36962d458e878f4c4939596976.png]

## （六）、font-weight属性 ##

*  font-weight属性设置字体的粗细程度，通常就用normal和bold两个值  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 3]

## （七）、font-style属性 ##

作用：设置文字的倾斜

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 2]

## （八）、text-decoration属性 ##

text-decoration属性用于设置文本的修饰外观的（下划线，删除线）  
![在这里插入图片描述][cc548ab9e5d74cc895a583d7e6a0713c.png]

## （九）、font-family属性 ##

*  font-family属性用于设置字体的属性
 *  字体可以是列表的形式，一般英语字体放到前面，后面的字体是前面的字体的后备字体
 *  字体名称中有空格，必须要用引号来包裹

font-family：" 微软雅黑";
    font-family: serif,"Times New Roman","微软雅黑";

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

## 中文字体也可以称呼他们的名字 ##

**字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体的较多，设置成其他字体的较少**  
![在这里插入图片描述][4ac98e364e6d44688eb07e4afffc0ae7.png]

## 问题一：如何设置为用户电脑中没有的字体呢？那就必须自己定义新的字体，这就需要我们有字体文件，当用户加载网页的时候，会同时下载这些字体 ##

## 定义字体，当我们拥有以下字体文件之后，就可以使用@font-face定义字体 ##

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

## （十）、阿里巴巴普惠体 ##

阿里巴巴提供了一套免费商用授权的普惠字体，网址 [https://www.iconfont.cn/webfont\#!/webfont/index][https_www.iconfont.cn_webfont_webfont_index]

使用阿里巴巴普惠字体也省去了下载的麻烦  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 39]

## 使用步骤： ##

## 下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式 ##

## 第一步：下载字体 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 40]

## 第二步：使用font-face声明字体（注意：在引用的时候要注意引用的路径哦） ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 41]

## 第三步：定义使用 webfont 的样式 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 42]

## 第四步：为文字加上对应的样式 ##

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 43]

## （十一）、text-indent属性 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 44]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 45]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 2]

## （十二）、 line-height行高 ##

*  line-height属性的单位可以是px为单位的数值

line-height：30px;

*  line-height属性的单位可以是 没有单位是数值，表示字号的倍数，这是最推荐的写法

line-height：1.5;

*  line-height属性也可以是百分数，表示字号的倍数

line-height：150%;

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 2]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 46]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 47]

## （十三）、单行文本垂直居中 ##

**行高等于盒子的高度，设置单行文本垂直居中对齐**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 48]  
设置text-align：center，即可实现文本水平居中

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

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

## （十四）、font合写属性 ##

![在这里插入图片描述][8654a1aeddb24d41a02fd5091d0f41df.png]  
![在这里插入图片描述][2af0c0b5fab04d22b72ff839cdb44f9f.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 50]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 51]

## （十五）、继承性 ##

*  文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有的标签中生效。
 *  因为文字相关的属性都有继承性，所以通常会设置body标签的字号、颜色、行高等、这样就能当做整个网页的默认样式了。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 4]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 52]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 53]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 5]

## （十五）、继承性的就近原则 ##

**在继承的情况下，选择器权重计算失效，就近原则**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 54]

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

## 五、盒子模型 ##

## （一）、什么是盒子模型 ##

所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 4]  
![在这里插入图片描述][2d26a2723e634917923b21b1f0a2d093.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 55]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 56]

## （二）、width属性 ##

*  width属性表示盒子内容的宽度
 *  width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
 *  当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 57]  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 58]

## （三）、height属性 ##

*  height属性表示盒子内容的高度
 *  height属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
 *  盒子的height属性如果不设置的话，它将自动被内容撑开，如果没有内容，默认是0

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 59]  
![在这里插入图片描述][5120f5d4ad00457498f0d69431cd86db.png]

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

## （四）、padding属性详解 ##

*  padding属性是盒子的内边距，即盒子边框内壁到文字的距离
 *  padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
 *  padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding
 *  padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][f168c27f299247ef879c4368272cf9fa.png]  
![在这里插入图片描述][e0e932a76aef4dce8bc8de7a2aae9ad9.png]  
![在这里插入图片描述][3ef7be4474074438b2927b7b54ff9dab.png]

## （五）、margin属性详解 ##

**margin是盒子的外边距，即盒子与其他盒子的距离**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 60]

## margin的塌陷问题 ##

**竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准**

![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 61]

## （六）、一些元素有默认的margin ##

**一些元素（比如body、ul、p等)都有默认的margin，在开始制作网页的时候，要将他们清除**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 62]

## （七）、盒子的水平居中 ##

**将盒子的左右两边的margin都设置为0，盒子将水平居中**  
**文本居中是text-align：center; 和盒子水平居中是两个概念**  
**盒子的垂直居中 我们需要使用绝对定位来实现 后面我们细说**  
![在这里插入图片描述][4c64d5cb3bc542a4b0366705d5cde470.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 63]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 2]

## （八）、盒模型的计算 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 3]

## （九）、box-sizing属性 ##

**给盒子添加了box-sizing：border-box属性之后，盒子的width、height数字就表示盒子实际占有的宽高（不包含margin）了，即padding、border变为内缩，不再外扩。**

**box-sizing属性大量用于移动网页的制作中，因为它结合百分比布局，弹性布局等非常好用，在PC页面中使用较少。**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 64]

## （十）、行内元素和块级元素 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 65]

## （十一）、行内块 ##

**img和表单元素是特殊的行内块，他们既能设置宽度和高度，也能够并排显示**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 66]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 67]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 4]  
![在这里插入图片描述][2fe5d4f15009494f846b9049082b501f.png]

## （十二）、行内元素和块级元素的相互转换 ##

*  使用display：block；可以将元素转换为块级元素
 *  使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见
 *  使用display：inline-block；可以将元素转换为行内块元素  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 68]  
    ![在这里插入图片描述][e729335aa4f04025b7f1e4b3f364c5a7.png]

## （十三）、元素的隐藏 ##

*  使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
 *  使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 69]  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 3]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 70]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 5]

## 六、浮动与定位 ##

## （一）、浮动 ##

*  浮动的本质：用来实现并排的效果
 *  浮动使用的要点：要浮动，并排的盒子都实现浮动
 *  父盒子要有足够的宽度，否则子盒子会掉下去

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

## （二）、浮动的顺序贴靠特性 ##

**子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素**

**如下图所示：3号盒子会掉到2号盒子的下面**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 3]

## （三）、浮动的元素一定能设置宽高 ##

**浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 71]  
![在这里插入图片描述][fdc0f6120acb45d682158b7c32234dc6.png]

## （四）、右浮动 ##

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

## （五）、使用浮动的注意事项 ##

*  垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动
 *  “大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动
 *  div是免费的，不要节约盒子  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 6]

## （六）、BFC规范 ##

**BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然**

## 观察下面的例子 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 72]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 73]

## 出现以上问题的原因 ##

*  一个盒子不设置height，当内容子元素都浮动时，无法撑起自身
 *  这个盒子没有形成BFC

## 解决办法 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 74]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 6]

## （七）、如何创建BFC？ ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 3]

## （七）、清除浮动 ##

**清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响**

## 举例说明 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 75]

## 来猜一下页面中会出现什么样的效果？ ##

**大家应该都会说两行两列？然而没有清除浮动就成行显示了！出现以下这种情况是没有清除浮动**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 76]

## 清除浮动的方法一： ##

![在这里插入图片描述][a5d21402c815414aa26a0c4e7a099e7c.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 4]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 7]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 1]

## 清除浮动的方法二： ##

![在这里插入图片描述][da6b566d6d3e4f01b34f076f35afa13d.png]  
使用方法二的副作用：margin会失效  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 77]

## 清除浮动的方法三： ##

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 4]

## 清除浮动的方法四： ##

![在这里插入图片描述][acfd9725a41c4f1489c5e6bee85c9828.png]  
![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 5][]

## （八）、相对定位 ##

**相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 5]

## 位置词描述：值可以是负数，即往规定方向相反移动 ##

![在这里插入图片描述][33f5e5567d7043bc8caec9aa07bc4202.png]  
**相对定位的性质：相对定位的元素，会在老家留坑，本质上任然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面元素产生任何影响。**

## （九）、相对定位的用途 ##

*  相对定位用来微调元素位置
 *  相对定位的元素，可以当做绝对定位的参考盒子  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 78]  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 79]

## （十）、绝对定位 ##

**绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 8]

## 绝对定位的位置描述词 ##

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

## 绝对定位的元素脱离标准文档流 ##

**绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖**

## 绝对定位的参考盒子 ##

*  绝对定位的盒子并不是永远以浏览器作为基点
 *  绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相

## 绝对定位的盒子垂直居中 ##

绝对定位的盒子垂直居中是一个非常实用的技术  
![在这里插入图片描述][0a7e0e4c2edc4e4c8d42a5fc5c150a65.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 80]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 81]

## 堆叠顺序 z-index属性 ##

**z-index属性是一个没有单位的正整数，数值大的能够压住数值小的**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 82]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 83]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 84]

## （十一）、绝对定位脱离标准文档流 ##

**绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖**

脱离标准文档流的方法：浮动、绝对定位、固定  
定位

## （十二）、绝对定位的用途 ##

*  绝对定位用来制作压盖、遮罩的效果
 *  绝对定位用来结合CSS精灵使用
 *  绝对定位可以结合JS实现动画

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 85]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0
            }
            
            .carousel { 
                position: relative;
                width: 650px;
                height: 360px;
                border: 1px solid #000;
                margin: 40px auto;
            }
            
            .carousel .btn { 
                position: absolute;
                width: 40px;
                height: 40px;
                margin-top: -20px;
                top: 50%;
                border-radius: 50%;
                text-align: center;
                line-height: 40px;
                background-color: rgba(255, 255, 255, .5);
                /* 鼠标变为小手状态 */
                cursor: pointer;
                font-size: 26px;
                font-family: consolas;
            }
            
            .carousel .btn:hover { 
                background-color: gold;
                color: #fff;
            }
            
            .carousel .leftbtn { 
                left: 10px;
            }
            
            .carousel .rightbtn { 
                right: 10px;
            }
            
            .carousel ol { 
                position: absolute;
                width: 120px;
                height: 20px;
                right: 20px;
                bottom: 20px;
                list-style: none;
            }
            
            .carousel ol li { 
                float: left;
                width: 20px;
                height: 20px;
                background-color: rgba(255, 255, 255, .5);
                border-radius: 50%;
                margin-right: 10px;
            }
            
            .carousel ol li.current { 
                background-color: gold;
            }
        </style>
    </head>
    
    <body>
        <div class="carousel">
            <img src="images/bj/0.jpg" alt="">
            <a class="leftbtn btn"> <</a>
            <a class="rightbtn btn">></a>
            <ol>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
    
        </div>
    </body>
    
    </html>

## （十一）、固定定位 ##

**固定定位：不管页面如何滚动、他都永远固定在那里**

**固定定位脱离标准文档流**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 86]

**固定定位的用途：“返回顶部”、“楼层导航”**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box { 
                position: fixed;
                width: 100px;
                height: 100px;
                right: 0;
                bottom: 100px;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div class="box"></div>
        <p> <img src="images/bj/0.jpg" alt=""></p>
        <p> <img src="images/bj/0.jpg" alt=""></p>
        <p> <img src="images/bj/0.jpg" alt=""></p>
        <p> <img src="images/bj/0.jpg" alt=""></p>
        <p> <img src="images/bj/0.jpg" alt=""></p>
        <p> <img src="images/bj/0.jpg" alt=""></p>
        <p> <img src="images/bj/0.jpg" alt=""></p>
        <p> <img src="images/bj/0.jpg" alt=""></p>
    
    
    
    
    
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 87]

## （七）、边框与圆角 ##

## （一）、border属性的三要素 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 4]

## （二）、线型 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_9_color_FFFFFF_t_70_g_se_x_16 1]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 3]

## （三）、边框的三要素小属性 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 2]

## （四）、四个方向的边框 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 3]

## （五）、四个方向边框的三要素小属性 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 88]

## （六）、去掉边框 ##

border-left：none；属性可以去掉左边框，以此类推

## （七）、利用边框制作三角形 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 89]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 6]

## （八）、圆角 ##

**border-radius属性的值通常为px单位，表示圆角的半径**

border-radius:10px

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_8_color_FFFFFF_t_70_g_se_x_16]

## 单独设置四个圆角 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 9]

## 圆角也可以用百分比为单位 ##

**border-radius属性的值也可以用百分比为单位，表示圆角起始于每条边的哪里**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 5]

## （九）、盒子阴影—box-shadow属性 ##

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

## 阴影延展 ##

![在这里插入图片描述][a885ff0f4cae4668a5e2aecc8f539049.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 90]

## 内阴影 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 91]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 4]

## 多阴影 ##

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

box-shadow: inset 2px 2px 10px red, 4px 4px 10px blue, 6px 6px 10px yellow;

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 4]

## （十）、 过渡 ##

**transition过渡属性是CSS3浓妆重彩的特性，过渡可以为一个元素在不同样式之间变化添加自动补间动画**

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

![在这里插入图片描述][942ac2b69b0842678a9afcc12b597521.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 8]

## 哪些属性可以参与过渡 ##

*  背景颜色和文字颜色都可以被过渡
 *  所有变形（包括2D和3D）都能被过渡
 *  所有数值类型的属性，都可以参与过渡，比如width，height，left，top，border-radius

## 过渡的四个小属性 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 9]

## 缓动参数 ##

**transition的第三个属性就是缓动参数，也就是变化速度曲线**

![在这里插入图片描述][387feee31d294757bf87df8e6402b167.png]  
![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 4][]

## （十一）、贝塞尔曲线 ##

**官网： [https://cubic-bezier.com/ ][https_cubic-bezier.com_]**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 92]  
![在这里插入图片描述][31502a20089049a7b4cf70756cf877c7.png]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            .box { 
                width: 1200px;
                overflow: hidden;
                margin: 40px auto;
            }
            
            .box ul { 
                list-style: none;
            }
            
            .box ul li { 
                position: relative;
                width: 380px;
                height: 210px;
                margin-right: 20px;
                float: left;
            }
            
            img { 
                width: 380px;
                height: 210px;
            }
            
            .box ul li .info { 
                position: absolute;
                width: 370px;
                height: 30px;
                color: #fff;
                line-height: 30px;
                padding-left: 10px;
                background-color: rgba(0, 0, 0, .5);
                left: 0;
                bottom: 0;
                opacity: 0;
                transition: opacity 0.5s linear;
            }
            
            .box ul li .info:hover { 
                opacity: 1;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <ul>
                <li><img src="images/bj/0.jpg" alt="">
                    <div class="info">北京的故宫</div>
                </li>
    
                <li><img src="images/bj/1.jpg" alt="">
                    <div class="info">十七孔桥</div>
                </li>
    
                <li><img src="images/bj/2.jpg" alt="">
                    <div class="info">国家大剧院</div>
                </li>
    
            </ul>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 93]

## （十二）、背景固定— background-attachment ##

**background-attachment属性决定着背景图像的位置是在视口内固定，还是随着包含它的区块滚动**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 94]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 5]

## （十二）— background-position属性 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_9_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 5]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 95]

**background-position属性可以设置背景图片出现在盒子的什么位置**

**可以用top、bottom、center、left、right描述图片出现的位置**  
![在这里插入图片描述][81425e004fee43e79c036ea198b8d005.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 96]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 6]

## （十三）、CSS精灵 ##

**CSS精灵：将多个小图标合并到一张图片上，使用background-position属性单独显示其中的一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图**

**CSS精灵可以减少HTTP的请求数量，加快网页的显示速度，缺点也很明显：不方便测量，后期改动麻烦**

![在这里插入图片描述][cf4182d40e904a6e9c3ca4eeb7f32318.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 97]  
![在这里插入图片描述][2d02255185bd43339d3a9ace51b73ccf.png]

## （十四）、background综合属性 ##

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

## （十五）、背景裁切 ##

**background-clip属性用来设置元素的背景裁切到哪个盒子**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 10]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 98]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 99]

## （十六）、线性渐变 ##

![!\[在这里][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 100]

## 渐变的方向可以写成度数的形式 ##

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

## 线性渐变可以有多个颜色值，并且可以使用百分数定义他们出现的位置 ##

![在这里插入图片描述][d586c8dbaecb41169786a08bb4cada44.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 101]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 5]

## （十七）、浏览器私有前缀 ##

**不同的浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_11_color_FFFFFF_t_70_g_se_x_16 1]

## （十八）、径向渐变 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 6]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 102]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 5]

## （十九）、2D变形 ##

## 旋转变形 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 7]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 103]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 104]

## （二十）、transform-origin属性 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 105]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 106]

## （二十一）、缩放变形 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 107]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 8]

## （二十二）、斜切变形 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 108]  
![在这里插入图片描述][6ffb2221fb0d4b9e85fe458a704366b8.png]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 109]

## （二十三）、位移变形 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 8]

## （二十四）、3D旋转 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 110]

## perspective属性 ##

**perspective属性用来定义透视的强度，可以理解为人眼到舞台的距离，单位是px**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 111]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 112]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 113]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 114]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 10]

## （二十五）、空间移动 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 115]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 116]

## （二十六）、动画的定义 ##

**可以使用 @keyframes来定义动画， keyframes表示关键帧，在项目上线之前，要补上@-webkit-这样的私有前缀**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 11]

## 动画的调用 ##

**定义动画之后，就可以使用animation属性调用动画**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 9]

## 第五个参数就是动画的执行次数，如果想永远执行可以写infinite ##

![在这里插入图片描述][0e114390acee4485ac78e5f970021395.png]  
![在这里插入图片描述][32ed9deb47a24717a7e87b8e355ecca9.png]  
![在这里插入图片描述][2bb0662f7a3b4cd2bfaea04a713f32b6.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 117]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 6]

## （二十七）、多关键帧动画 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 118]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 119]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/72ed26cf27184fb7911a1c758bca43a3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/91febc79dd8948aa89fa41fc7877fcd5.png
[5577d71b521a4d4c9bc8c1fce447a004.png]: /images/20220828/bc329d8d30424d89b2c3bc9e9173bb7c.png
[fe530a8b9e5f4399b5977c5c81ee7a1a.png]: /images/20220828/4740b67d36474c1da055550d45c2811b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/2c2e5c3461174c19b3f7a6960d73325e.png
[17bfd5a6253445d5afeac87fd23cf9e0.png]: /images/20220828/88388ea4db9c410aac735a978029ad76.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/824e93b2aa124b0ab707d549d419bfaa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/9c5bfc4eb49f487487e23a98277a0971.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/ff1a2efb786d4ac599a4d90de1aaf787.png
[cd2ebefaab87482b85f3046db60f9316.png]: /images/20220828/1e2f4be2320e44cf865a50482c0f903c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/d81e08aad24e403c96db1e3f492e1bef.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/b9db09fc284345c593673fab17abe244.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/d027760cd57645268c6df5afd5f388e7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/251ea7e873dd45a28945b4ea7e0b0585.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a4f6b64de1064425a2708884e45088df.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/f5e61b304a2a40cf82923807cf1dc011.png
[e9f10e5391974fe186dd3172c3af68f6.png]: /images/20220828/332e8c410bd24316bdfc3ed4926eb386.png
[4705ee3acbb3459ca935123be91dc6cf.png]: /images/20220828/6b2f8e53a9bd43a3bb3edc80c5106d3d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/b789e41d2bd04eee97a72cc55da35038.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/7e2405b15c4347ad9992b961fc3f30db.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/588e1297b5354cc1a11546d9a86eeffd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c5d0a47b4adb4808800953fd88773710.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220828/80cab8b0802143279f22f3ada29f9841.png
[c90dd41abcc04a5085262c5f1caefb31.png]: /images/20220828/0b94e675eaaf4261b2535bf47ac99a48.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6ef00ed7ba7c40aa8d9e2090287ad049.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1ed00dedbf0145f2818af390a01805aa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220828/72412fe4558e45fdb22f6fb24bcfdb03.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220828/d77a80932cd14f15997599ec477c80ae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220828/2c02d816063b49d3b03910b7910f1b36.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 16]: /images/20220828/81ecb6c2b9d2463abdb24c5b2e2f8caa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 17]: /images/20220828/a47f45878b194b938a6ed15083892fd7.png
[ed9734a27abb437998f16364b88d5517.png]: /images/20220828/c9a32fd9d2884a468b8cb4254f966cc1.png
[https_img-blog.csdnimg.cn_866c6e88022c4c288f3ee78a8b74c6e0.png_x-oss-process_image_watermark_type_ZHJ]: /images/20220828/ed60268c62b7463a9024402d5aa1682f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 18]: /images/20220828/64ee2913553e47028a3fe53d8196d91b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/49e131a68d614e458c04f53eba4b832a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 19]: /images/20220828/7a0e939f63ce469d88e8ef31e8612a1c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 20]: /images/20220828/4d8556ecb6d5484b83c5f31f58febe4b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 21]: /images/20220828/f16fcaffc82541c6b8d6873487d2effd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 22]: /images/20220828/c35121c952494f76a106f217dca4271e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 23]: /images/20220828/98c7af5de55a48049cfe3d66124fb2d8.png
[fbdaf8f056cd4a66901e4e17c8e108d2.png]: /images/20220828/688a40f50d6745e0a7a7f967df3bbd47.png
[9817b52349c140928ac548684d0b0011.png]: /images/20220828/4827b169c2e44fd08b5794d6b0a0580a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/971ce738947146a391605485e9fe726d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 24]: /images/20220828/696a75426763441fbf46850e48ea0b1e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 25]: /images/20220828/ef8d55a16a6149689db070dfab0d9939.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/e43ff7f219034f3a92edc467a2cced0a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/eb09c49e3542405a85c93655519b6117.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 26]: /images/20220828/94eb2f01f7e845e986c4b1dc27b39181.png
[d02f0fd370e548b68003d291b7eafc81.png]: /images/20220828/082253d336a64cd880e026b98b3680ba.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/fa10a8a3e97642f692cef3dd52bca3b2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/12b11e55421a4c0d80d3808ef336929b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 27]: /images/20220828/60a0e30d9c0f48d3966d2359208777db.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 28]: /images/20220828/3ac3b847dfe1444aa0006c739dea2cff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/91a51d87e9d74272bf971ba9059ceeba.png
[1d917aee62ca4a808803e6d422086f57.png]: /images/20220828/622f81f9fee24a9abb36df86ae82358b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/4b28fa2d4ddd44508dfe4c3b9ca9b884.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/93afd932bbaa4a57b516267e139541d3.png
[d3d9384e0372447bb871ce3ecf75d08e.png]: /images/20220828/1290a9bf0c0247f7859b2361b75fc1a0.png
[dfc9e045b27d469a869a561e570ee8d3.png]: /images/20220828/c4cde66531af4d40bbb6d01c9480a037.png
[e6ba1bf03c7540168c64896f8cc30540.png]: /images/20220828/4d3f40a2a971433a9fef8f68f7bbd402.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 29]: /images/20220828/39c0aeca1d974e0896d4b8ed173b9775.png
[1404d884498043f595df751f054a00b9.png]: /images/20220828/6c442d38870147ae81bb5e6282355e08.png
[6f85e9d83a334174a0e167a9c54051cb.png]: /images/20220828/6df2497fcdf24124b99a254885d1e941.png
[a8bdc1ca17d74914b3c765b95c28677e.png]: /images/20220828/d12cc36e95154848ac7892ad719deb4b.png
[ea85a939ef884bbca06e2934cbec1270.png]: /images/20220828/ae985205344e43e68bbc65cd198200d8.png
[d8d0e65e8e5f4daeb8ef9245b4d6f818.png]: /images/20220828/51b366ccb42e4e4682fffab1366b5baa.png
[2df2d1147b8d4641b8b37da26bc1f435.png]: /images/20220828/b8d7df7b51c8474282227129cb0ef4d8.png
[750f59c0b5a049998923ab9b60d04593.png]: /images/20220828/bd2b1760fccf48249cd8463a38559601.png
[84f974fbe5c547a2b8ffc189e59493a7.png]: /images/20220828/4119bd401ca842e58e769358867f5ae0.png
[10d8070e9a284982a65f5dcf1d5d9c03.png]: /images/20220828/382a25a4e36647d0b1bcd18ce58f4916.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 30]: /images/20220828/3d5d06c270ce4a61bbc910634baf83bf.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/5a2d9da8d4414353b1f60ad3b0895ab3.png
[87bd9f409f9b44029b0ab427af7d7a6b.png]: /images/20220828/81b596accaa64320ab8501bca4101ccf.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 31]: /images/20220828/faae395814d744b7a848005aa3ed3c03.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/81acc4ad54b841f28617cf9122cc7534.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 32]: /images/20220828/a229f21334db4992a6a569cdeb9bfac8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 33]: /images/20220828/95caefc09d3f4d5dba348be4bcb19a76.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/9074385a00b24970bf7084d7e970285e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/6b65e8b421db4b1eabde0f71ad6c84ba.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a93e32d37574456f8fd8f4c178c00a00.png
[18cc8bb928074277a4e5b2d96a30b184.png]: /images/20220828/14ee707af31a4f1b8081f04519e07d53.png
[827c31551976470c8ee4adb80ebccd11.png]: /images/20220828/c018d744785b4cb197dd214e40e3cb4f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 34]: /images/20220828/9883806b6d954289814b1832ff2bb15a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 35]: /images/20220828/1a161162be834cb1b50aa96a50eddfaa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 36]: /images/20220828/5c4c57cf02c84484bcd48e31a2a36bc3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/b10aa470eeee4f7987f6c45421cc203a.png
[a52cd9bbc72e414ea3d88ade59957df4.png]: /images/20220828/bbb78c418fa94325b2f4bf911758ce12.png
[ed606c30568648fc8e4709c7b9bea41c.png]: /images/20220828/7ec2b2596297491c82c52117f411fafd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 37]: /images/20220828/ce5921dc2e7e4a55831204b7b0ea6ec2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 38]: /images/20220828/53f2153e694d44fd818ec5727d102c3a.png
[41a98634e8b04c509bd22513154b52dc.png]: /images/20220828/3bbc449ea22e4f72b0388948ce77159d.png
[65012c36962d458e878f4c4939596976.png]: /images/20220828/a14d7b7d103547eebedb6076692df5d5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/b071ad7849cd4531a76754387f01177f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/8e6a04dc5e934b33841b0bfa901c9c2c.png
[cc548ab9e5d74cc895a583d7e6a0713c.png]: /images/20220828/acdbf5863341466fac2b0c47588c0fd2.png
[2a049541edcb45dbabd649c794a14107.png]: /images/20220828/7580be85eb574afeab055805ad71df0b.png
[4ac98e364e6d44688eb07e4afffc0ae7.png]: /images/20220828/8304a652c3f7486397f25cd7e81fe041.png
[ffd195e687474137bf231149b6d7dc76.png]: /images/20220828/97b8c385fcd64845b3b6b46af4b79664.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/6b35a9203b8d4ff1b5f0717aa026bc16.png
[https_www.iconfont.cn_webfont_webfont_index]: https://www.iconfont.cn/webfont#!/webfont/index
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 39]: /images/20220828/3af967f83d28443e8fac49d867e93a5d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 40]: /images/20220828/83b3b68c9d7d41f3b7a48d0b7dbe6d1d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 41]: /images/20220828/9a5766efe7484577873f4d6ff08a7eb0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 42]: /images/20220828/ab4f4177a079401baba4c55851b2f7a9.png
[c6ab62f0e40a4004aa14d639ded14ab5.png]: /images/20220828/4ec6dcc4a7f14dafbb37e3e992963658.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 43]: /images/20220828/fefe99c84fec4b829a0a3ffcdc3cdcd1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 44]: /images/20220828/0d0a23c430834061b62d09f307e85801.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 45]: /images/20220828/d3a7a74e01594aa49e8c211c2101f13f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/0144f76e65994f62b71b813ace87b7c8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/49be2af4979f4fd98ec69f1066d1b19c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 46]: /images/20220828/6acced7931064509ac8ea7ec52499275.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 47]: /images/20220828/f3ece7357e3b4cc593dc7278deb3bff1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 48]: /images/20220828/8a32416d30b445a5b2d051dfa6b167c2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 49]: /images/20220828/9fefae3e1c9f4269b1a28fcbaf7ddffb.png
[b89b861e518e4edea7cdb1e656edc0c2.png]: /images/20220828/c99ce90c4f66497f9c0e31fac3e6acaa.png
[2366bd2d1e4147578ef18510eb740c6a.png]: /images/20220828/f7e05ede48f241ac9b8b1bd1d921ff5e.png
[8654a1aeddb24d41a02fd5091d0f41df.png]: /images/20220828/13f365ae4ac14774b6082e64afea4c47.png
[2af0c0b5fab04d22b72ff839cdb44f9f.png]: /images/20220828/1178c9271d9749dd8792a99376c626d9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 50]: /images/20220828/bcaafadcfe394a54a84d77af7d0f0a6f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 51]: /images/20220828/7e6cdb0505e74c4ebd7d5778bd13848f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/9039f49fd9a043bcbd6e3b533db2fe5f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 52]: /images/20220828/bdb31fe2d4db48009fb739796051e874.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 53]: /images/20220828/67e9f37e1faf4f8fa85cec6a1b02f323.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/68932e2c9e2f4cc0830b1baacf3f0bd9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 54]: /images/20220828/d9a754fc627d472fa8afaac8f1c4eed5.png
[2bcfa19bd53c43798aedb8961d03affd.png]: /images/20220828/9fd4c12436624f4cbaa0c98c9e6b603c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/2067ab3e51c94834a987c35f19db3613.png
[2d26a2723e634917923b21b1f0a2d093.png]: /images/20220828/a74ce10fbadb4e6a84b04c45e13b7c98.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 55]: /images/20220828/6fd623b41f2443beb55357f2cb28a073.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 56]: /images/20220828/7ccbf26099974eff90ddbf2fa962df01.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 57]: /images/20220828/480fcd3667f0460a981a3bbc10de7c81.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 58]: /images/20220828/50ebfb64126c49568a5d90f0d8129487.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 59]: /images/20220828/3de8e4fe4dca47f8bee790e8f377a235.png
[5120f5d4ad00457498f0d69431cd86db.png]: /images/20220828/9e004117fef948be96c29d1b1d3700c3.png
[c9610ccfba3448d98b0dae9206d653c9.png]: /images/20220828/4ea070afe990447f825063ecd4703b91.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/6cca4eb005aa415d9ed68c8986991642.png
[f168c27f299247ef879c4368272cf9fa.png]: /images/20220828/86410fcb626047aaa404cfe50db3b019.png
[e0e932a76aef4dce8bc8de7a2aae9ad9.png]: /images/20220828/0e4f6cce8e4c4660a5b2326f00109aa9.png
[3ef7be4474074438b2927b7b54ff9dab.png]: /images/20220828/a8839a86cd854baab9b5b695853abcdc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 60]: /images/20220828/14c62e3b131540a4a5707aa192602190.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 61]: /images/20220828/1c031a888b1c4ac8af94e2680fd0fb3e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/2b37c51dcbf94535855ddcf3665f3064.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 62]: /images/20220828/a259e0830ba64f3aa7a48b23e24a50be.png
[4c64d5cb3bc542a4b0366705d5cde470.png]: /images/20220828/3bbf3a9a642b49ebbccbef2ee3ce5a92.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 63]: /images/20220828/cee63e413d7c430d9502fdb96a14b99b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/e3e9fac64d934b77832fbb6eb42b0138.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/a0e3d76219df43a29dc52473d6925579.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 64]: /images/20220828/8a06dd04c187463596f2472287d79271.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 65]: /images/20220828/525e2263d99d416ca9975efaef8bca4b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 66]: /images/20220828/70eb1aa1426442e293ea09b619d4fd5b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 67]: /images/20220828/6308354c31b14935beec6b0da3b86445.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/b98a8e7a1091477c818b51e5e9d0a8c8.png
[2fe5d4f15009494f846b9049082b501f.png]: /images/20220828/72c265dd0d164dd9b5299d9306bac818.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 68]: /images/20220828/ada099d5b0794a239ad9a304d55c63ae.png
[e729335aa4f04025b7f1e4b3f364c5a7.png]: /images/20220828/44c012751b694842a3d9902b87167c52.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 69]: /images/20220828/ab0834a573b047b98f341d9e74703755.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/f94b999cc9074b61aa2107c8297d49be.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 70]: /images/20220828/30f101d1fc544bf386d5ca6704445994.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/81c07e03bcf047e1b092eb5fab2ca1ca.png
[2195266b594b430b8e886e3e2d05e2e5.png]: /images/20220828/a839e1c20ab14ba9a5cedc6375a30a38.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/02557275841846df917d674e416d3cb7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 71]: /images/20220828/e2ac514d6b1144d6be6bd17df65c43d4.png
[fdc0f6120acb45d682158b7c32234dc6.png]: /images/20220828/a3b604f8f3214464b5b922d1413afe98.png
[d9bdea1b30a9436aa2692c40ef5fb123.png]: /images/20220828/cfa0a97dd72e4b2e9e5a600a3b1e3bfb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/3fbaa1d5a3d344a3a655aed65a967ec4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 72]: /images/20220828/c58d941966084a4ca265786af9359967.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 73]: /images/20220828/1192253003e64d209848b4d6d2aa8a05.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 74]: /images/20220828/a5fe311fb477402686528c6b6fc31230.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/d70ce4092b2144b0a83ee16fed29ab09.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/388e4088beec446fa5bc529b3d8c0615.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 75]: /images/20220828/4aa68a7828e5483f81a405433804e55a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 76]: /images/20220828/4ed3f17e64ee4c70828605f9e60080b6.png
[a5d21402c815414aa26a0c4e7a099e7c.png]: /images/20220828/f5746c18fac34459a8dd53a879d3b1a4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/ed28ed77e292414ca0adc6bf06404751.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/6fd86b49382e41f1b60c7489854d332b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/f287d6a45eb5401aace0d4198d3d61a1.png
[da6b566d6d3e4f01b34f076f35afa13d.png]: /images/20220828/026eee9a7c6d437a81ab54352c3d0611.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 77]: /images/20220828/425028bc08f94f24a09647c7a3215448.png
[ae9e7c63fda14ddd863f55b3bea416ee.png]: /images/20220828/cee6021aa84f4cabbac72b4f882841a9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/732c3f177bf24f859e597a3c54667a8e.png
[acfd9725a41c4f1489c5e6bee85c9828.png]: /images/20220828/521cfac879f3453695912037d97f8f18.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/01458451fd1b48f39cb57d5fabf273d9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/c6a9899740b24b7f87757b727b4b1d9b.png
[33f5e5567d7043bc8caec9aa07bc4202.png]: /images/20220828/94d2b11a896a494c9bc196578c15f95d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 78]: /images/20220828/328a51d8864a4ca1aed69119d9950bf4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 79]: /images/20220828/256d6d0197fb469e8dd426311c159628.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/ee67f16a54eb402a82e7b49b4b532f6f.png
[95f8c85d4ed046d6977d0156fb08f070.png]: /images/20220828/28c443b76efc4050aaf60d10d1f9bc64.png
[0a7e0e4c2edc4e4c8d42a5fc5c150a65.png]: /images/20220828/28852cee0b8c4857923221d8ac863297.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 80]: /images/20220828/a778eda4c5da4abda1dedf0a563dd758.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 81]: /images/20220828/cc7aea6c7efd4e3e98fd509eaac11444.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 82]: /images/20220828/4013beb9721d4a1da1626041f8a4a4cb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 83]: /images/20220828/a6f83549380d439cb728eb1868f3e0f0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 84]: /images/20220828/806132e9f9804400b7a11e34f41bd03a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 85]: /images/20220828/fcaaaf441b854873adaf0577795b2c9a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 86]: /images/20220828/8c02dd8676da4f2093b2d75fc6de63fb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 87]: /images/20220828/088628593d324ece91de2a9d20db101e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/598d88b45c5e4668a56009b6c413e63c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_9_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/652a2e66fc7b4f2686761bc6e9b0a4e7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/ddfdf66772034deb97166d783011586e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/656f4e71b8bf402fbef86c14ff288796.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/7f2b0b7bbfaa44148012831f6c8f9ffa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 88]: /images/20220828/fa8075c225ae480387c416c1bda667a2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 89]: /images/20220828/fe05fa75fb064ea78d0c8a78ec4f3f74.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_14_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/1b1297540407460aaa47c360a7144371.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/443981cdb8fa4feba6f909310f814bf8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/eed93b8e60a7445ba6cc3f9d80064ed1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/ffe77b12e6024661b77b6ff833f4f495.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/686ce3ad5acf479da44e64548753cb72.png
[c5d2bc3ac27c47f297a28e7997dd6258.png]: /images/20220828/f54cf6d52f6f4b0da850da5328b15b63.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0c45f7d42241400ba9ec68fb04953d5b.png
[a885ff0f4cae4668a5e2aecc8f539049.png]: /images/20220828/319c4996be804caa849e5905ef0e20f7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 90]: /images/20220828/bc40b2af51a54d28aa06de43a312bc27.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 91]: /images/20220828/f19569ba0c34437eb401e89fbddfa006.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/9dc8aa0132664cc69f96c93d3ac90840.png
[909824e91f994f82a28d6b66bc6ab505.png]: /images/20220828/87cc2bd82f8f4162a181ed57ba16acd7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/6170cb527ed640528c2e4344ca82b8af.png
[efde78f6678f43c1a5642e20a523c963.png]: /images/20220828/1510ab99a9b848ab8cb7770911f4fe68.png
[942ac2b69b0842678a9afcc12b597521.png]: /images/20220828/a5b323d005304b45b1fa85560b12b6ed.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/89ed0a1e65e142b48b12aab88b610990.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/f8953d6ad35c486f9e7614c16ecf1895.png
[387feee31d294757bf87df8e6402b167.png]: /images/20220828/16b6cc337f7f48bd89a24e73aeeab8a1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/d813c05b1741433b8a9e5cd0d989e7df.png
[https_cubic-bezier.com_]: https://cubic-bezier.com/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 92]: /images/20220828/18213b622df34d7eb43940bc88331417.png
[31502a20089049a7b4cf70756cf877c7.png]: /images/20220828/38032ecae02947d198f6e6ace51e8c0d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 93]: /images/20220828/afd23e8e5d664057bd6a86b330748ca9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_15_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/34b9b9ce50334df0ae0c766135854e80.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 94]: /images/20220828/cefaf2303a8148b99f63a3631ed0e5e6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/cc471f3b7d16488990910f98aada2ced.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_9_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/532d30b2bed0473ab58cd439a34cb883.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/8667ea47e5eb499d912febeaf316349a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 95]: /images/20220828/0d7aec749dd946acbccb2263daeca87e.png
[81425e004fee43e79c036ea198b8d005.png]: /images/20220828/c835ce3bfa914785bee6a077e44023aa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 96]: /images/20220828/8b1bd7280caa4ef3ac46fdea48ee5da6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/cac348ff20684c228dfacd96df94557f.png
[cf4182d40e904a6e9c3ca4eeb7f32318.png]: /images/20220828/4c05cfda427a432ca63bc62fbb81de87.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 97]: /images/20220828/f5a2259afa2340c5bf28ec134840116c.png
[2d02255185bd43339d3a9ace51b73ccf.png]: /images/20220828/fd34a05985d64e83b9cb355a37b1989f.png
[c289c79fd8874f7c80582d046f6e3dbd.png]: /images/20220828/a5b8bc4f0ce0446abf978ce19e8c6a82.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/af852f371d4043858e4b419d940e961c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 98]: /images/20220828/0161dd4b0534442cb559339b761d9494.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 99]: /images/20220828/9a49383aaf974c66a445a364893f6ed7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 100]: /images/20220828/99c61436a08a40eda712de48b398b90f.png
[5203fa8738f1419db06b423ab3780a41.png]: /images/20220828/ba1ab4c8f88140eaac6a87933cf36ce7.png
[d586c8dbaecb41169786a08bb4cada44.png]: /images/20220828/e2409a2a7f894c5e9aade6013feefdd3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 101]: /images/20220828/b088a58a16b243798692152fa5944e29.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_13_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/ab06df1ba6714e17a9a344f0f72322f2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_11_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/8b750dd006c74c15ab5b4331a7b22403.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/b59206a32ea04e7e94993eb602f05a31.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 102]: /images/20220828/bdf5fbb9bd5e4c0c80d20c4fa998eaff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/e84cbc2c4d584ec2a5028a2bcb1418d6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/dc741a31e819458cb195b01b609ff247.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 103]: /images/20220828/a5a7f85667c64bf8b84559c700ce6a24.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 104]: /images/20220828/5ff7f7b0d9fa4e5cbd4b9b3d5d9915af.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 105]: /images/20220828/0b6922f274594e949365cc9a2ed7e29f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 106]: /images/20220828/f7807bb5d9854af2b8a383a465257694.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/d3b1db479d9a4bccbeb80316df9c04df.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 107]: /images/20220828/68df20824d964468847bd67568a1d56a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/8c0e188e4d6a46018fdb15d2bd876e29.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 108]: /images/20220828/293c69b27fff4e17b98ae3adee8c6969.png
[6ffb2221fb0d4b9e85fe458a704366b8.png]: /images/20220828/f98617558d5b48eeb810b5dfa095b899.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 109]: /images/20220828/191b1341c7d647d1a257ba305c706c05.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_18_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/87f9bb047b8d49c1bcb05738f15f812a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 110]: /images/20220828/5a59f978ce5141a5a586b6e3012a8271.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 111]: /images/20220828/0571c11f4cda47b5aba5cf59c38b5a6e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 112]: /images/20220828/39d000be31904bd497166d8553e02f6a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 113]: /images/20220828/7be5ffbc5637429c9c4e8854c5a2d605.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 114]: /images/20220828/64adc9a7abcc4e86945827bb5062b937.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_16_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/8c356b92312143dbbe54be31086e15d5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 115]: /images/20220828/e6befd771552474781db277211cd6c1d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 116]: /images/20220828/3aaeb5c0d4e14f9394c29e6c8d541059.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_17_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/efffe9b52d334c4ea62a17521b4d7c2b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_19_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/b4b831aee78f45d688ea4d61651e337a.png
[0e114390acee4485ac78e5f970021395.png]: /images/20220828/fdbedc88e4ba4c02a1cde8886bc04f7a.png
[32ed9deb47a24717a7e87b8e355ecca9.png]: /images/20220828/5265cc47fc954f778c1f7fc4f039dbe2.png
[2bb0662f7a3b4cd2bfaea04a713f32b6.png]: /images/20220828/3427576bcbef43ea82199c4082b677ef.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 117]: /images/20220828/2057e993b16c458f9c9d62bef2d32bca.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_10_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/60eeb1c720b34c7baf355d40a5a5e55f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_12_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/59573db240fc484c997a2c83f908bc80.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 118]: /images/20220828/5404a6fe752e44d780b7405f5ae64406.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA546L5ZCM5a2m6KaB5Yqq5Yqb_size_20_color_FFFFFF_t_70_g_se_x_16 119]: /images/20220828/5c663eb28cef444fa6e425564ba477e7.png