Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】

偏执的太偏执、 2022-10-29 07:41 11阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [Bootstrap学习笔记01【快速入门、栅格布局】][Bootstrap_01]【day01】
> 2.  [Bootstrap学习笔记02【全局CSS样式、组件和插件、案例\_黑马旅游网】][Bootstrap_02_CSS]【day01】

**目录**

03 Bootstrap\_全局CSS样式

Bootstrap\_全局CSS样式\_按钮

Bootstrap\_全局CSS样式\_表格

04 Bootstrap\_组件和插件

Bootstrap\_组件\_导航条&分页条

导航条

分页条

Bootstrap\_插件\_轮播图

05 案例\_黑马旅游网

案例\_黑马旅游网\_分析

案例\_黑马旅游网\_页眉部分

案例\_黑马旅游网\_主体&页脚部分

主体部分

页脚部分

黑马旅游网——首页代码

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

# 03 Bootstrap\_全局CSS样式 #

## Bootstrap\_全局CSS样式\_按钮 ##

> 如果你觉得xxx样式可以，从官网上 复制过来，就完事了 ~
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

> **CSS样式和JS插件**
> 
> 全局CSS样式：  
>     \* 按钮：class="btn btn-default"  
>     \* 图片：  
>         \*  class="img-responsive"：图片在任意尺寸都占100%（响应式）  
>         \*  图片形状  
>             \*  <img src="..." alt="..." class="img-rounded"> ：方形  
>             \*  <img src="..." alt="..." class="img-circle">  ：圆形  
>             \*  <img src="..." alt="..." class="img-thumbnail"> ：相框  
>     \* 表格  
>     \* 表单  
> 2. 组件：  
>     \* 导航条  
>     \* 分页条  
> 3. 插件：  
>     \* 轮播图
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

## Bootstrap\_全局CSS样式\_表格 ##

> **CSS样式和JS插件**
> 
> 1. 全局CSS样式：  
>     \* 按钮：class="btn btn-default"  
>     \* 图片：  
>         \*  class="img-responsive"：图片在任意尺寸都占100%（响应式）  
>         \*  图片形状  
>             \*  <img src="..." alt="..." class="img-rounded"> ：方形  
>             \*  <img src="..." alt="..." class="img-circle">  ：圆形  
>             \*  <img src="..." alt="..." class="img-thumbnail"> ：相框  
>     \* 表格  
>         \* table  
>         \* table-bordered：表格边框  
>         \* table-hover：表格悬浮变色  
>     \* 表单  
>         \* 给表单项添加：class="form-control"   
> 2. 组件：  
>     \* 导航条  
>     \* 分页条  
> 3. 插件：  
>     \* 轮播图

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

# 04 Bootstrap\_组件和插件 #

## Bootstrap\_组件\_导航条&分页条 ##

### 导航条 ###

> ![20210210095738948.png][]
> 
> ![20210210095747769.png][]

### 分页条 ###

> ![20210210100337163.png][]  ![20210210100348660.png][]

## Bootstrap\_插件\_轮播图 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

# 05 案例\_黑马旅游网 #

## 案例\_黑马旅游网\_分析 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]

> ![20210210101557942.png][]

## 案例\_黑马旅游网\_页眉部分 ##

> ![2021021010194751.png][]  ![20210210102049634.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]

## 案例\_黑马旅游网\_主体&页脚部分 ##

### 主体部分 ###

> ![20210210103549318.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16][]

### 页脚部分 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17][]

### 黑马旅游网——首页代码 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	
    	<title>Bootstrap HelloWorld</title>
    	
    	<link href="css/bootstrap.min.css" rel="stylesheet">
    	
    	<script src="js/jquery-3.2.1.min.js"></script>
    	
    	<script src="js/bootstrap.min.js"></script>
    	<style>
    		.paddtop {
    			padding-top: 10px;
    		}
    		.search-btn {
    			float: left;
    			border: 1px solid #ffc900;
    			width: 90px;
    			height: 35px;
    			background-color: #ffc900;
    			text-align: center;
    			line-height: 35px;
    			margin-top: 15px;
    		}
    		.search-input {
    			float: left;
    			border: 2px solid #ffc900;
    			width: 400px;
    			height: 35px;
    			padding-left: 5px;
    			margin-top: 15px;
    		}
    		.jx {
    			border-bottom: 2px solid #ffc900;
    			padding: 5px;
    		}
    		.company {
    			height: 40px;
    			background-color: #ffc900;
    			text-align: center;
    			line-height: 40px;
    			font-size: 8px;
    		}
    	</style>
    </head>
    <body>
    	
    	<header class="container-fluid">
    		<div class="row">
    			<img src="img/top_banner.jpg" class="img-responsive">
    		</div>
    		<div class="row paddtop">
    			<div class="col-md-3">
    				<img src="img/logo.jpg" class="img-responsive">
    			</div>
    			<div class="col-md-5">
    				<input class="search-input" placeholder="请输入线路名称">
    				<a class="search-btn" href="#">搜索</a>
    			</div>
    			<div class="col-md-4">
    				<img src="img/hotel_tel.png" class="img-responsive">
    			</div>
    		</div>
    		
    		<div class="row">
    			<nav class="navbar navbar-default">
    				<div class="container-fluid">
    					
    					<div class="navbar-header">
    						
    						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
    							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    							<span class="sr-only">Toggle navigation</span>
    							<span class="icon-bar"></span>
    							<span class="icon-bar"></span>
    							<span class="icon-bar"></span>
    						</button>
    						<a class="navbar-brand" href="#">首页</a>
    					</div>
    					
    					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    						<ul class="nav navbar-nav">
    							<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    							<li><a href="#">Link</a></li>
    							<li><a href="#">Link</a></li>
    							<li><a href="#">Link</a></li>
    							<li><a href="#">Link</a></li>
    							<li><a href="#">Link</a></li>
    						</ul>
    					</div>
    				</div>
    			</nav>
    		</div>
    		
    		<div class="row">
    			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    				
    				<ol class="carousel-indicators">
    					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
    					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
    				</ol>
    				
    				<div class="carousel-inner" role="listbox">
    					<div class="item active">
    						<img src="img/banner_1.jpg" alt="...">
    					</div>
    					<div class="item">
    						<img src="img/banner_2.jpg" alt="...">
    					</div>
    					<div class="item">
    						<img src="img/banner_3.jpg" alt="...">
    					</div>
    				</div>
    				
    				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    					<span class="sr-only">Previous</span>
    				</a>
    				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    					<span class="sr-only">Next</span>
    				</a>
    			</div>
    		</div>
    	</header>
    	
    	<div class="container">
    		<div class="row jx">
    			<img src="img/icon_5.jpg">
    			<span>黑马精选</span>
    		</div>
    		<div class="row paddtop">
    			<div class="col-md-3">
    				<div class="thumbnail">
    					<img src="img/jiangxuan_3.jpg" alt="">
    					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    					<font color="red">¥ 699</font>
    				</div>
    			</div>
    			<div class="col-md-3">
    				<div class="thumbnail">
    					<img src="img/jiangxuan_3.jpg" alt="">
    					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    					<font color="red">¥ 699</font>
    				</div>
    			</div>
    			<div class="col-md-3">
    				<div class="thumbnail">
    					<img src="img/jiangxuan_3.jpg" alt="">
    					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    					<font color="red">¥ 699</font>
    				</div>
    			</div>
    			<div class="col-md-3">
    				<div class="thumbnail">
    					<img src="img/jiangxuan_3.jpg" alt="">
    					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    					<font color="red">¥ 699</font>
    				</div>
    			</div>
    		</div>
    		<div class="row jx">
    			<img src="img/icon_6.jpg">
    			<span>国内游</span>
    		</div>
    		<div class="row paddtop">
    			<div class="col-md-4">
    				<img src="img/guonei_1.jpg">
    			</div>
    			<div class="col-md-8">
    				<div class="row">
    					<div class="col-md-4">
    						<div class="thumbnail">
    							<img src="img/jiangxuan_3.jpg" alt="">
    							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    							<font color="red">¥ 699</font>
    						</div>
    					</div>
    					<div class="col-md-4">
    						<div class="thumbnail">
    							<img src="img/jiangxuan_3.jpg" alt="">
    							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    							<font color="red">¥ 699</font>
    						</div>
    					</div>
    					<div class="col-md-4">
    						<div class="thumbnail">
    							<img src="img/jiangxuan_3.jpg" alt="">
    							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    							<font color="red">¥ 699</font>
    						</div>
    					</div>
    				</div>
    				<div class="row">
    					<div class="col-md-4">
    						<div class="thumbnail">
    							<img src="img/jiangxuan_3.jpg" alt="">
    							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    							<font color="red">¥ 699</font>
    						</div>
    					</div>
    					<div class="col-md-4">
    						<div class="thumbnail">
    							<img src="img/jiangxuan_3.jpg" alt="">
    							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    							<font color="red">¥ 699</font>
    						</div>
    					</div>
    					<div class="col-md-4">
    						<div class="thumbnail">
    							<img src="img/jiangxuan_3.jpg" alt="">
    							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    							<font color="red">¥ 699</font>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	<footer class="container-fluid">
    		<div class="row">
    			<img src="img/footer_service.png" class="img-responsive">
    		</div>
    		<div class="row company">
    			江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
    		</div>
    	</footer>
    </body>
    </html>

> 加油~

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[Bootstrap_01]: https://blog.csdn.net/weixin_44949135/article/details/113773977
[Bootstrap_02_CSS]: https://blog.csdn.net/weixin_44949135/article/details/113775470
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210210093602422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210210093655158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/201c6bc89e2a4f179aae5ed593e7fe7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210210094440612.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/cbbde015af794d60a579f28f28f3995f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/810fcb574ab145cc91ec91157eb05bb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210210095512130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/a0f89225f01844db960106421a9c18ca.png
[20210210095738948.png]: /images/20221024/25c22a52646340bf9cb8e283a2c2146d.png
[20210210095747769.png]: /images/20221024/f1f1c638421e45ccae387030ad9a0488.png
[20210210100337163.png]: https://img-blog.csdnimg.cn/20210210100337163.png
[20210210100348660.png]: /images/20221024/a19bf892069f4ce1b08d99ea0484c518.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/49caf9f290b24c5e8b27ca5d9279fb0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/8435fd6204304bd68000bb5785ef24f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/c759b8ae890047be8f9bb7e2728fbb62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/ff9471ae9e9b40bd92880abb87729d16.png
[20210210101557942.png]: /images/20221024/db70215f503c40bf803d9d1d2413621e.png
[2021021010194751.png]: https://img-blog.csdnimg.cn/2021021010194751.png
[20210210102049634.png]: /images/20221024/599f0e2166244b7c8cfbe85bae01b0e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/bae8142eca794124a167affae1563001.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/8a35ff148b5e49c8ad0201b404bab18e.png
[20210210103549318.png]: /images/20221024/b99897277e394619a077aa785975a6b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/ed265f02946a47ee89dac562e8efd004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: /images/20221024/8e7384095bd742358212aca3d0461b5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16]: /images/20221024/702650e3565946a5800f74a73e5e37d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17]: /images/20221024/e47bc1f0c74e40d8ae67e9a4d5210241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20210210104630866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19]: /images/20221024/d4678508c5a442b29abdc814da06cf2d.png