Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】

亦凉 2022-12-22 09:15 91阅读 0赞

> [【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程 博客汇总表 详细笔记】][Bootstrap4_MySQL_10_ _]

***目   录***

W3C标准盒子模型和IE盒子模型的区别

Bootstrap4——新闻管理手机端页面

菜鸟教程——Bootstrap4 网格系统

Bootstrap4——导航、导航栏、轮播

Bootstrap4响应式页面——根据设备的不同，显示不同的结果

电脑端展示（一行展示4个商品信息div）

手机端展示（一行展示1个商品信息div）

平板电脑端展示（一行展示2个商品信息div）

PowerDesigner 图形化数据库设计软件的使用

新建工程：File -> Project

File->New Model

创建数据表

编辑数据表的属性

PowerDesigner软件 自动生成SQL语句

使用记事本打开sql文件，查看代码

SQLyog软件的使用

新建连接

新建数据库

执行SQL语句——创建数据表

查看生成好的数据表

直接编辑数据表数据

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

# W3C标准盒子模型和IE盒子模型的区别 #

> [https://blog.csdn.net/sayoko06/article/details/86743083][https_blog.csdn.net_sayoko06_article_details_86743083]

# Bootstrap4——新闻管理手机端页面 #

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][] 新闻列表页面
> 
>  *  max-width: 100%; /\*最大宽度100%\*/
>  *  height: auto; /\*高度自适应\*/

> ![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][]

# [菜鸟教程——Bootstrap4 网格系统][Bootstrap4] #

> ![20201119113241966.png][]

# Bootstrap4——导航、导航栏、轮播 #

> 1.  [菜鸟教程——Bootstrap4——导航][Bootstrap4 1]
> 2.  [菜鸟教程——Bootstrap4——导航栏][Bootstrap4 2]
> 3.  [菜鸟教程——Bootstrap4——轮播][Bootstrap4 3]

## Bootstrap4响应式页面——根据设备的不同，显示不同的结果 ##

### 电脑端展示（一行展示4个商品信息div） ###

> ![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][]

### 手机端展示（一行展示1个商品信息div） ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

### 平板电脑端展示（一行展示2个商品信息div） ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
    		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
    		
    		<script src="jquery/jquery.min.js"></script>
    		
    		<script src="js/popper.min.js"></script>
    		
    		<script src="bootstrap4/js/bootstrap.min.js"></script>
    		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    		<title>网格系统</title>
    		<style type="text/css">
    			.carousel-item>img {
    				width: 100%;
    			}
    		</style>
    	</head>
    	<body>
    		<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    			
    			<a class="navbar-brand" href="#">Navbar</a>
    
    			
    			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    				<span class="navbar-toggler-icon"></span>
    			</button>
    
    			
    			<div class="collapse navbar-collapse" id="collapsibleNavbar">
    				<ul class="navbar-nav">
    					<li class="nav-item">
    						<a class="nav-link" href="#">Link</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Link</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link" href="#">Link</a>
    					</li>
    				</ul>
    			</div>
    		</nav>
    		<div style="margin-top: 56px;" id="demo" class="carousel slide" data-ride="carousel">
    
    			
    			<ul class="carousel-indicators">
    				<li data-target="#demo" data-slide-to="0" class="active"></li>
    				<li data-target="#demo" data-slide-to="1"></li>
    				<li data-target="#demo" data-slide-to="2"></li>
    			</ul>
    
    			
    			<div class="carousel-inner">
    				<div class="carousel-item active">
    					<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="img-fluid">
    				</div>
    				<div class="carousel-item">
    					<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="img-fluid">
    				</div>
    				<div class="carousel-item">
    					<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="img-fluid">
    				</div>
    			</div>
    
    			
    			<a class="carousel-control-prev" href="#demo" data-slide="prev">
    				<span class="carousel-control-prev-icon"></span>
    			</a>
    			<a class="carousel-control-next" href="#demo" data-slide="next">
    				<span class="carousel-control-next-icon"></span>
    			</a>
    
    		</div>
    
    		<div class="container-fluid">
    			<div class="row">
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop1.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop2.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop1.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop2.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop1.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop2.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop1.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop2.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop1.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop2.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop1.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    				<div class="shop-item col-lg-3 col-md-6 col-12">
    					<img src="img/shop2.jpg" class="img-fluid" />
    					<p>商品********* 价格<span style="color: red;">￥999</span></p>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

# PowerDesigner 图形化数据库设计软件的使用 #

> ![20201119102945477.png][]

## 新建工程：File -> Project ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

## File->New Model ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]
> 
> ![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][]

## 编辑数据表的属性 ##

> ![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][]
> 
>  *  P：主键。
>  *  M：非空。
>  *  varchar：长度可变。
>  *  datetime：日期+时间。
>  *  timestrap：时间戳，自动更新时间。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]   添加注释：用户主键ID
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]

## PowerDesigner软件 自动生成SQL语句 ##

> **【选中数据表，点击：DataDase -> Generate Database（建议删除多余的数据表！）】**

> ![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][]

## 使用记事本打开sql文件，查看代码 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20][]

/*==============================================================*/
    /* DBMS name:      MySQL 5.0                                    */
    /* Created on:     2020/11/19 10:55:58                          */
    /*==============================================================*/
    
    
    drop table if exists user_info;
    
    /*==============================================================*/
    /* Table: user_info                                             */
    /*==============================================================*/
    create table user_info
    (
       user_id              int not null comment '用户主键ID',
       user_name            varchar(255) not null comment '用户名',
       user_pwd             varchar(255) not null comment '用户密码',
       create_time          datetime comment '创建时间',
       update_time          datetime comment '更改时间',
       primary key (user_id)
    );
    
    alter table user_info comment '用户信息表';

# SQLyog软件的使用 #

## 新建连接 ##

> ![20201119105847211.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 22][]

## 新建数据库 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23][]

## 执行SQL语句——创建数据表 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24][]

## 查看生成好的数据表 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25][]

## 直接编辑数据表数据 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28][]

[Bootstrap4_MySQL_10_ _]: https://blog.csdn.net/weixin_44949135/article/details/109722002
[https_blog.csdn.net_sayoko06_article_details_86743083]: https://blog.csdn.net/sayoko06/article/details/86743083
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221120/ee6648f3dba44d8490c0b500cd68bebb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/0141333ffeb2436984686c871474ac3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/2737ca0b50014592b04b1c96bdb98d3a.png
[Bootstrap4]: https://www.runoob.com/bootstrap/bootstrap-grid-system.html
[20201119113241966.png]: /images/20221120/c082a8a1dbe04e5a8748e62d1e1bb9eb.png
[Bootstrap4 1]: https://www.runoob.com/bootstrap4/bootstrap4-navs.html
[Bootstrap4 2]: https://www.runoob.com/bootstrap4/bootstrap4-navbar.html
[Bootstrap4 3]: https://www.runoob.com/bootstrap4/bootstrap4-carousel.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/d106316c02fd4d66b225cb76b18da072.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/c0a1f0667b4543a987d78d5c3f322ca6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221120/11ae2191774d4706bdd6a83832993140.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221120/ac8046361a9944b7aafce21f980d39f2.png
[20201119102945477.png]: /images/20221120/e7e3c965e7c940d3a739871b8b7e46f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221120/760dacabb04a4a239c738e25f17fa500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221120/fbd68fe853e04ca9b0e7a796ed69b6aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221120/8e37d522fbc34593a5706f7938869fde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: /images/20221120/b28cfa1df9f542298ac3a9188d43bf1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: /images/20221120/87d9918e6e1849ae8c294da78561b0c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: /images/20221120/571838e9216d467fbb1b0390a5d03f79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: /images/20221120/37fa3f4538da4b77b8467dab5961cc5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: /images/20221120/ff8dca0f14b44b2f873f40597caaa572.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: /images/20221120/2b73d746cc0b4311bd77055e61e6e2ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20201119105424300.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 17]: /images/20221120/a18728eb6b73476a861cef315c4330b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18]: /images/20221120/436a8af6f81d4fb188406703a7095504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19]: /images/20221120/954ce2cf609b46608964320d1f7fd99a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20]: /images/20221120/cf03085249df42e9a4d01f6f83e068f3.png
[20201119105847211.png]: /images/20221120/b18654ec49154405a8c136efb19cf322.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20201119105946540.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 22]: /images/20221120/f83c6026f055485e8a5ec45c8b57fea3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 23]: /images/20221120/d134d35b8bb04a65ad518df2b888f51e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 24]: /images/20221120/eeb61d147cdd417eac8bb263be8905a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 25]: /images/20221120/f701573352a24156a11477567f77ce02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 26]: /images/20221120/34162ebaf17c4970ac6e0c911d5de824.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 27]: /images/20221120/31a4d5bd8fda4aab89dba53a92c56faf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 28]: /images/20221120/08da6e76f5a949a1bebdf2facbacc677.png