CSS基础知识学习

清疚 2023-01-23 09:59 13阅读 0赞

### 文章目录 ###

*  Lesson3-周三（7.14）
 *   *  总结
     *  一、什么是CSS
     *  二、CSS选择器（\*\*\*\*\*）
     *  三、CSS代码放置位置
     *  四、开发常用样式
     *   *  背景样式
         *  文本样式
         *  字体样式
         *  链接样式
         *  表格样式
         *  边框样式
     *  五、盒子模型（\*\*\*\*\*）
     *  六、 UOLab联合开放实验室登录平台练习
     *  七、CSS显示
     *  八、CSS浮动（float）

# Lesson3-周三（7.14） #

## 总结 ##

1.  切记用c语言的学习思维学习`HTML、CSS`
2.  关键是盒子模型
3.  CSS开发心理：边写边预览来调试代码
4.  重点：CSS选择器、CSS盒子模型、CSS代码放的位置、边框样式在开发中比较常见
5.  如何使用网址看到自己制作的网页？

*  购买云主机linux系统（阿里云主机），获得一个IP地址
 *  把自己做好的网页，远程上传到阿里云主机（此时可以通过IP来访问网页）
 *  百度搜索域名注册，注册自己的域名：域名在工信部通管局备案并取得备案号，并通过阿里云来把自己的域名和IP绑定，部分网站需要在公安局备案，否则不可公开访问或上线。

## 一、什么是CSS ##

**注意**：学习`CSS`前应先了解`HTML`。

1.  层叠式演示表，简称为样式。（`Cascadoing Style Sheets`）
2.  由`W3C`组织制定的标准，最新版`CSS3`。
3.  `CSS`由浏览器执行。
4.  作用： 美化网页（`HTML`不具备美化网页的功能）
5.  样式通常存储在样式表中
6.  外部样式表可以极大提高工作效率
7.  外部样式表通常存储在 `CSS` 文件中

## 二、CSS选择器（\*\*\*\*\*） ##

1.  标记选择器
2.  id选择器
3.  class选择器

**三者之间没有必要的先后关系**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS选择器</title>
    		<style>
    			/*标记选择器*/
    			div {
              
    				color: red;
    			}
    			p {
          
    				color: green;
    			}
    			/*id选择器，以#开头*/
    			#shanxiDiv {
          
    				color: yellow;  
    			}
    			#tyDiv {
          
    				font-size: 40px;
    			}
    			/*class选择器（类选择器），以小数点开头*/
    			.nuc {
          
    				color: blue;
    				font-size: 50px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div class="nuc">中北大学</div>
    		<div id="shanxiDiv">山西大学</div>  
    		<div id="tyDiv">太原理工大学</div>
    		<p class="nuc">这是个段落标签</p>
    	</body>
    </html>

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

## 三、CSS代码放置位置 ##

1.  页内样式：放在`head`之间，用`style`标记
2.  行内样式：放在标记的`style`属性里，行内样式优先级最高（放置的位置最靠上）
3.  外部样式：放在独立的`.css`文件中，在网页上用`link`标记引入

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS代码放的位置</title>
    		
    		<link rel="stylesheet" href="nuc.css">
    		<style>
    			div {
          
    				color: red; /*字体颜色*/
    			}				
    		</style>
    	</head>
    	<body>
    		<h1>CSS代码位置1（页内样式）:放在head之前，用style标记</h1>
    		<div>中北大学软件学院</div>
    		
    		<h1>CSS代码位置2（行内样式）：放在标记的style属性里</h1>
    		<p style="color:green;font-size: 20px">真实的故事</p>  
    		
    		<h1>CSS代码位置3（外部样式）：放在单独的CSS文件中</h1> 
    		<input type="text" id="uname"> 
    	</body>
    </html>

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

## 四、开发常用样式 ##

### 背景样式 ###

background-color     //背景颜色
    background-image     //背景图片
    background-repeat      //背景图片的平铺方式
    background-position   //背景图片的位置

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS背景样式</title>
    		<style>
    			#subBtn{
          
    				background-color: #FF8000;
    				color: white;
    				width: 134px;
    				height:31px ;
    			}
    		</style>
    		<style>
    			#mydiv {
          
    				background-color: #0000FF;
    				width: 400px;
    				height: 400px;
    				background-image: url('images/user.png');  /*背景图片，默认水平和垂直平铺*/
    				background-repeat:repeat-x; /*使背景图片仅仅水平平铺*/
    				background-repeat:no-repeat; /*不想让图片平铺，图片在页面只出现一次*/
    				background-position:right bottom; /*改变图像在背景中的位置*/
    			}
    		</style>
    	</head>
    	<body>
    		<div id="mydiv"></div>
    		<input type="submit" id="subBtn" value="下一步">
    	</body>
    </html>

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

### 文本样式 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS文本样式</title>
    		<style>
    			.nuc {
          
    				color: red;
    				text-align: center;
    				text-decoration: underline;
    				text-transform: capitalize;  /*文本首字母大写*/
    				text-transform: lowercase; /*字母全部小写*/
    				text-transform: uppercase; /*字母全部大写*/
    			}
    			#my {
          
    				text-decoration: line-through;
    				text-indent:50px; /*文本第一行的缩进*/
    			}
    			a {
             /*去掉超链接的下划线*/
    				text-decoration: none;
    				text-decoration:overline;  /*横线在文字上方*/
    			}
    		</style>
    	</head>
    	<body>
    		<p class="nuc">zhongbeidaxue</p>
    		<p id="my">xxx的会诊已经结束</p>
    		<a href="">太原市科技局</a>
    	</body>
    </html>

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

### 字体样式 ###

网页上的默认文字是`16px`;在工程上，网页上的文字一般是`12px`或`14px`

**font-weight** 字体粗细，`400` 等同于 `normal`，而 `700` 等同于 `bold`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 5]  
**font-style** 字体样式  
**font-family** 字体系列  
**font-size** 字体大小

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS字体样式</title>
    		<style>
    			.myflag {
          
    				font-family: "仿宋" ;
    				font-size: 40px;
    				font-style:normal;  /*正常字体*/
    				font-style:italic;  /*斜体字*/	
    			}
    		</style>
    	</head>
    	<body>
    		<p class="myflag">这是一个段落</p>  
    	</body>
    </html>

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

### 链接样式 ###

**链接状态**

a:link - 正常，未访问过的链接
    a:visited - 用户已访问过的链接
    a:hover - 当用户鼠标放在链接上时
    a:active - 链接被点击的那一刻

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS超链接样式</title>
    		<style>
    			a {
          
    				text-decoration: none;
    				
    			}
    			a:hover {
             /*鼠标划过去字体变颜色、大小*/
    				color: red;
    				font-size: 50px;
    			}
    			p {
          
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<p>
    			<a href="http://www.nuc.edu.cn">中北大学官网</a>
    		</p>
    	</body>
    </html>

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

### 表格样式 ###

**border-collapse**：collapse细线表格  
**vertical-align**：垂直对齐方式  
**padding**：边框和表格内容之间的间距  
**border: 1px solid black** 表格边框的宽度、填充线条、颜色

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>表格样式</title>
    		<style>
    			table {
          
    				width: 500px;
    				height:500px;
    				text-align: center; /*表格文字全部居中*/
    				vertical-align:bottom;  /*垂直对其方式*/
    				
    			}
    			td {
          
       				 padding:15px;  /*边框和表格内容之间的间距*/
    			}
    			table,tr,td {
            /*给table、tr、td同时施加样式*/
    				/*边框宽度1像素、实线、黑色  dotted表示小数点*/
    				border: 1px solid black;
    			}
    			table {
          
    				/*边框折叠，不要有空心*/
    				border-collapse: collapse;
    			}
    			a {
          
    				text-decoration: none; 
    			}
    			a:hover {
          
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<table border="1">
    			<tr>
    				<td>学号</td>
    				<td>姓名</td>
    				<td>籍贯</td>
    				<td>操作</td>			
    			</tr>
    			<tr>
    				<td>2013041407</td>
    				<td>郭泳妍</td>
    				<td>山西省</td>
    				<td>
    					<a href="#">修改</a>  
    					<a href="#">删除</a>
    				</td>
    			</tr>
    			<tr>
    				<td>2013041407</td>
    				<td>郭泳妍</td>
    				<td>山西省</td>
    				<td>修改 删除</td>
    			</tr>
    			<tr>
    				<td>2013041407</td>
    				<td>郭泳妍</td>
    				<td>山西省</td>
    				<td>修改 删除</td>
    			</tr>
    			<tr>
    				<td>2013041407</td>
    				<td>郭泳妍</td>
    				<td>山西省</td>
    				<td>修改 删除</td>
    			</tr>
    		</table>
    	</body>
    </html>

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

### 边框样式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 10]  
**不同侧面指定不同的表格样式**

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS边框样式</title>
    		<style>
    			#uname {
          
    				border: 1px solid red;
    				width: 220px;
    				height: 35px;
    				border-radius: 5px; /*边框四个角带弧度*/
    			}
    			#mydiv {
              
    				border:1px solid blue;
    				width: 500px;
    				height: 500px;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="text" id="uname"><br>
    		<div id="mydiv">这是小学期实训</div>
    	</body>
    </html>

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

## 五、盒子模型（\*\*\*\*\*） ##

*  与网页布局密切相关
 *  重要：外边距：`margin`、内边距`padding`；内外边距是相对的，看站在哪一方的立场。编边距有四个方向——上、下、左、右
 *  网页的坐标轴**原点**是**左上角**
 *  内边框的内外边距增大，最外面边框也会随之增大，这是`CSS`盒子模型的既定规则  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 13]

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

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>盒子模型</title>
    		<style>
    			#firstDiv {
          
    				width: 480px;
    				height: 480px;
    				border: 1px solid red;
    				padding-top: 30px;
    				padding-left: 50px;
    				margin: 0 auto; /*让div居中*/
    			}
    			#secondDiv {
          
    				width: 260px;
    				height: 260px;
    				border: 4px solid cyan;
    				padding-top: 10px;
    			}
    			#loginBtn {
          
    				margin-top: 30px;
    				margin-left: 20px;  /*离左边的距离*/
    			}
    		</style>
    	</head>
    	<body>
    		<div id="firstDiv">
    			<div id="secondDiv">
    				<button id="loginBtn">登录按钮</button>
    			</div>
    		</div>
    				
    	</body>
    </html>

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

## 六、 UOLab联合开放实验室登录平台练习 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>教务系统登录</title>
    		<style>
    			body {
          
    				background-color: #1E9FFF;
    			}
    			#loginDiv {
          
    				background-color: white;
    				width: 480px;
    				height: 420px;
    				margin: 0 auto;
    				color: #1E9FFF;
    				margin-top: 100px;
    				text-align: center;
    				padding-top: 20px;
    			}
    			#uname {
          
    				width: 400px;
    				height: 35px;
    				border-radius: 5px;	     /*边框弧度*/
    				border: 1px solid lightgray; /*边框颜色*/	
    				margin-left: -30px;	
    				background-color: transparent;
    				padding-left:30px ;
    			}
    			#upsw {
          
    				width: 400px;
    				height: 35px;
    				border-radius: 5px;	     /*边框弧度*/
    				border: 1px solid lightgray; /*边框颜色*/	
    				margin-left: -30px;	
    				background-color: transparent;
    				padding-left:30px ;
    				margin-top: 11px;
    			}
    			#loginBtn {
          
    				width: 430px;
    				height:35px;
    				margin-top: 11px;
    				background-color: #1E9FFF;
    				border: 1px solid #1E9FFF;
    				border-radius: 5px;
    				color: white;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="loginDiv">
    			<h1 align="center">UOLab联合开放实验室管理平台</h1>
    			<img src="images/user.png">
    			<input type="text" id="uname" name="username" placeholder="用户名">
    			<br>
    			<img src="images/password.png">
    			<input type="password" id="upsw" name="userpw" placeholder="密码">
    			<br>
    			<button id="loginBtn">登录</button>
    		</div>
    	</body>
    </html>

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

## 七、CSS显示 ##

*  display ，display隐藏并释放
 *  visibility，而visibility隐藏但不释放

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS显示与隐藏</title>
    		<style>
    			.picDiv {
          
    				/*display: none; /**图片隐藏，不显示*/
    				visibility: hidden;/*第二种隐藏方法*/
    			}
    		</style>
    	</head>
    	<body>
    		<h1>中北大学软件学院</h1>
    		<div class="picDiv">
    			<img src="images/1.png">
    		</div>
    		<h1>软件工程专业</h1>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 17]  
`span`(内联元素)元素作为块元素（块级元素）：`span {display:block;}`  
块级元素(`block`)**特性**：

*  总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示（可以自动换行）;
 *  宽度(`width`)、高度`(height`)、内边距(`padding`)和外边距(`margin`)都可控制;![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 18]  
    内联元素(`inline`)**特性**：
 *  和相邻的内联元素在同一行（不可自动换行）;
 *  宽度(`width`)、高度(`height`)、内边距的`top/bottom`(`padding-top/padding-bottom)`和外边距的`top/bottom`(`margin-top/margin-bottom`)都不可改变，就是里面文字或图片的大小

**块级元素**主要有：

address , blockquote , center , dir , div , dl ,  fieldset ,
     form , h1 , h2 , h3 , h4 , h5 , h6 ,hr , isindex , 
     menu , noframes , noscript , ol ，p , pre , table , ul , li

**内联元素**主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , 
    font , i , img , input , kbd , label , q , s , samp , select , 
    small , span , strike , strong , sub , sup ,textarea , tt , u , var

**可变元素**(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

## 八、CSS浮动（float） ##

*  主要用于网页布局（`CSS+DIV`）
 *  `CSS+DIV`做网页布局离不开浮动，要理解浮动的意思（通过边写边预览）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS浮动</title>
    		<style>
    			#firstDiv {
          
    				width: 300px;
    				height: 80px;
    				background-color: yellow ;
    				float: left;/*让第一个DIV脱离流 即浮于第二个上方，第二个成为了第一个块*/
    			}
    			#secondDiv {
          
    				width: 410px;
    				height: 100px;
    				background-color: blue;
    				float: left;
    			}
    			#thirdDiv {
          
    				width: 130px;
    				height: 100px;
    				background-color: red;
    				float: left;
    			}
    			#fourthDiv {
          
    				width: 290px;
    				height: 80px;
    				background-color: green;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="firstDiv">这是第1个DIV</div>
    		<div id="secondDiv">这是第2个DIV</div>
    		<div id="thirdDiv">这是第3个DIV</div>
    		<div id="fourthDiv">这是第4个DIV</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 19]  
`clear` 属性指定元素两侧不能出现浮动元素。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 20]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 21]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/4a119de9ba6c433e857f124395cb84f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221004/48277110002e4933a4c317bfdf29ff32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221004/14352e84fc8d4164b983541e2d447196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221004/f95b9dbe65874784b09ac6159c49f5eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221004/cfa52536452a486694613c599c44cb8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221004/4cddf9d1a48c43c8adfff17e84f4b095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221004/5ddbae929c934849ba1fee72ffb0032c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221004/539ebb09ada3466aa1568ce67e537ac3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221004/27ded078f24946abb4e837abca013100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221004/d9924b6a84ad4bdc926e7625defba223.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221004/4940eba915ae4399ae7857a62cac3a71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221004/9f307475204a414a905e90fa63966631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221004/aa20c8b6117a484d9e9efdb63fdcbe62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221004/5fcaca4f460e47fc9be1afe29895e8f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221004/26ed5b8b180c4c5b9783655bc2184745.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221004/fc1f4532f32d40e1aa0e36ea5f570d09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221004/867bc99d2f90442ca4b63d0df415dbd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221004/1c9321135e2240a88884b05cb4d0f86a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221004/a98a50d01b514f90846021f22e1f0fa2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20221004/1ca129a56ee24f239c5eaac7f45ffff5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 20]: /images/20221004/9b2fbf4725834a73b2a3a85fba6d367d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 21]: /images/20221004/516eb9fe894a4d0da3913a8f4ebac8fc.png