【响应式Web前端设计】一文学会使用Bootstrap！

傷城~ 2022-11-14 10:20 115阅读 0赞

### 文章目录 ###

*  1 概念
 *  2 Bootstrap简介
 *  3 布局容器
 *  4 导航栏（navbar）
 *   *  4.1 基本
     *  4.2 响应式
 *  5 垂直表单-基本表单
 *  6 栅格系统
 *  7 标签页
 *  8 响应式工具

[请先学习该文][Link 1]

# 1 概念 #

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

媒体查询

媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

实例  
如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) \{  
body \{  
background-color: lightblue;  
\}  
\}

# 2 Bootstrap简介 #

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

# 3 布局容器 #

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

<!DOCTYPE html>
    <html>
    <head>
        <title>布局容器</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <br>
    
    <div class="container" style="border:1px solid #000000; height:100px;">.container</div>
    
    <div class="container-fluid" style="border:1px solid #000000; height:100px;">.container-fluid</div>
    <script src="lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

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

# 4 导航栏（navbar） #

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

## 4.1 基本 ##

<!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap基础导航栏</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <nav class="navbar navbar-default" role="navigation">
        
        <div class="navbar-header">
            <a class="navbar-brand " id="nav-brand-itheima" href="#" >
                网站首页
            </a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
    </nav>
    <script src="lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

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

## 4.2 响应式 ##

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

<!DOCTYPE html> <html> <head> <title>Bootstrap响应式导航栏</title> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">   
                
            
        
    </head>
    <body>
    <nav class="navbar navbar-default" role="navigation">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                <span class="sr-only">汉堡按钮</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        
            <div class="navbar-header">
                <a class="navbar-brand " id="nav-brand-itheima" href="#" >
                    网站首页
                </a>
            </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="##">系列教程</a></li>
                <li><a href="##">名师介绍</a></li>
                <li><a href="##">成功案例</a></li>
                <li><a href="##">关于我们</a></li>
            </ul>
    </div>
    </nav>
    <script src="lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][20210328194204546.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 13]

<!DOCTYPE html>
    <html>
    <head>
        <title>餐饮网站header部分</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
            /*设置body元素字体为Microsoft YaHei*/
            body {  font-family: Microsoft YaHei}
            .head-top{ 
                background: #5fa022;
                padding: 0.8em 0;
            }
            .navbar-brand{ 
                padding: 0 0;
            }
            /*设置图片logo的大小和位置*/
            .navbar-brand>img{ 
                height: auto;
                margin-right: 5px;
                margin-top: 5px;
                width: 250px;
            }
            /*设置整个导航菜单的内边距、背景色和阴影*/
            .navbar-default{ 
                padding: 1.5em 0;
                background-color: #f2f0f1;
                box-shadow: 12px -5px 39px -12px;
            }
            /*设置导航栏中菜单a链接的样式*/
            .navbar-default .navbar-nav>li a { 
                top: 10px;
                padding: 0.5em 3em;
                text-decoration: none;
                font-weight: 600;
                font-size: 1.2em;
                color:#919191;
            }
            /*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/
            .navbar-default .navbar-nav> li >a:hover, .navbar-default .navbar-nav> li >a:focus { 
                background:#D96B66;
                color: white;
                border-radius: 3px;
                -webkit-border-radius: 3px;
            }
            /*设置导航栏右侧a链接（0.00）的颜色*/
            .navbar-right>a{ 
                color:#D96B66;
            }
            /*媒体查询：当视口小于970px时，导航菜单字体变小，避免了换行的问题*/
            @media (max-width: 970px) { 
                .navbar-default .navbar-nav>li a { 
                    font-size: 1.1em;
                }
            }
            /*header部分结束*/
        </style>
    </head>
    <body>
    
    <header>
        <div class="head-top"></div>
        <nav class="navbar navbar-default" >
            <div class="container-fluid">
                <div class="container">
                    <div class="navbar-header">
                        
                        <a href="#" class="navbar-brand" ><img src="images/logo.png"  alt=""></a>
                        
                        
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                            <span class="sr-only">汉堡按钮</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    
                    <div class="collapse navbar-collapse" id="navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#" >主页</a></li>
                            <li><a href="#">餐厅</a></li>
                            <li><a href="#">健康</a></li>
                            <li><a href="#">话题</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                        <div class="navbar-right ">
                            <a href="#">
                                <h3> <span >￥0.00 <img src="images/bag.png" alt=""/></span></h3>
                            </a>
                        </div>
                    </div>
                </div>
             </div>
            </div>
        </nav>
    </header>
    
    
    <script src="lib/jquery/jquery-1.11.0.min.js"></script>
    
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

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

# 5 垂直表单-基本表单 #

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

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

<!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap基本表单</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <form role="form">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" id="name"
                   placeholder="请输入名称">
        </div>
        <div class="form-group">
            <label for="inputfile">文件输入</label>
            <input type="file" id="inputfile">
            <p class="help-block">这里是块级帮助文本的实例。</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">记住我
            </label>
        </div>	
        <button type="submit" class="btn btn-default">提交</button>
    </form>
    </body>
    </html>

# 6 栅格系统 #

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

<!DOCTYPE html> <html> <head> <title>栅格系统</title> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <style> div{ 
            border: 1.5px solid #000000;
        }
    </style>
    <br>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-xs-6">1</div>
            <div class="col-md-3 col-xs-6">2</div>
            <div class="col-md-3 col-xs-6">3</div>
            <div class="col-md-3 col-xs-6">4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-xs-6">5</div>
            <div class="col-md-3 col-xs-6">6</div>
            <div class="col-md-3 col-xs-6">7</div>
            <div class="col-md-3 col-xs-6">8</div>
        </div>
    </div>
    <script src="lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

![在这里插入图片描述][20210329165457163.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 19]

# 7 标签页 #

**说到点子上了 标签式导航是一个页面内的导航。导航条是整站的导航。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 20]

<!DOCTYPE html>
    <html>
    <head>
        <title>胶囊标签页</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <br>
                <ul class="nav nav-pills">
                    <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="pill">Home</a></li>
                    <li role="presentation"><a href="#profile" role="tab" data-toggle="pill">Profile</a></li>
                    <li role="presentation"><a href="#messages" role="tab" data-toggle="pill">Messages</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="home">我是第一页</div>
                    <div class="tab-pane " id="profile">我是第二页</div>
                    <div class="tab-pane " id="messages">我是第三页</div>
                </div>
    <script src="lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

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

# 8 响应式工具 #

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

<!DOCTYPE html> <html> <head> <title>响应式工具</title> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style> div{ 
                border: 1px solid black;
                font-weight: 800;
            }
        </style>
    </head>
    <body>
    <br>
    <div class="container" style="padding: 40px;">
        <div class="row visible-on">
            <div class="col-xs-6 col-sm-3" >
                <span class="hidden-xs">特别小型设备隐藏</span>
                <span class="visible-xs">✔ 在特别小型设备上可见</span>
            </div>
            <div class="col-xs-6 col-sm-3" >
                <span class="hidden-sm">小型设备隐藏</span>
                <span class="visible-sm">✔ 在小型设备上可见</span>
            </div>
            <div class="clearfix visible-xs"></div>
            <div class="col-xs-6 col-sm-3" >
                <span class="hidden-md">中型设备隐藏</span>
                <span class="visible-md">✔ 在中型设备上可见</span>
            </div>
            <div class="col-xs-6 col-sm-3" >
                <span class="hidden-lg">大型设备隐藏</span>
                <span class="visible-lg">✔ 在大型设备上可见</span>
            </div>
        </div>
    </div>
    </body>
    </html>

[Link 1]: https://lixiang.blog.csdn.net/article/details/114269663
[20210328190109237.png]: /images/20221022/428385adae7e4aa9a8810dd8b430bc24.png
[20210328190136180.png]: /images/20221022/746cd3b55d5c4b4abe14e5a8d7f21875.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210328190358480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/8ede621e4b13479b9b87b0c3684a9293.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/81f2f92b942843b3a41a938ef68fe16a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/65e2271c59384a8ea4e7dfa2862aa5eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/719768ffe6a64176876cea4a79266b0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/de5ade8c3f7d4ddabe5a4147c6f215c1.png
[20210328192308430.png]: /images/20221022/296190b60fea435ebd357b1379f6c2ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/4b78140a8aa74faf82048be09f38cf06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 7]: /images/20221022/e1c9f349ad6942809d87e77c8e514500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 8]: /images/20221022/30ff1864e2f148528a9ae3dbb480d8bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 9]: /images/20221022/c2be9f05340945a3b60522196ca22f24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 10]: /images/20221022/9e70770e59804aa28920e9f1ebb6b451.png
[20210328194204546.png]: /images/20221022/37fc57638e0b44bfb582ed14943e1959.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 11]: /images/20221022/5943aeade1e74bb98f06c03d29a11dcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 12]: /images/20221022/8ebb985ee737475f8c57f6b8d41d0079.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 13]: /images/20221022/5ec221e317e14b108bb0854e580c6acf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 14]: /images/20221022/b645c49b6b6e47e29d219bff3fc963ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 15]: /images/20221022/6dad4ba8b4bc415381f4e93fab8a754a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 16]: /images/20221022/2d3ce6eb32fc4b23aabd84c57f988659.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 17]: /images/20221022/fa1236eb705b4205a00c17d8d1f65bf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 18]: /images/20221022/a5aa679224d946b1a35710312f69c037.png
[20210329165457163.png]: /images/20221022/7b0701e746e94796ab4630574a8ff4bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 19]: /images/20221022/29d3ae3360844be7aa38254a6df61575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 20]: /images/20221022/797f20ab1e33478cafacbc0c80124ae9.png
[20210329170723112.png]: /images/20221022/6ef5feca65844f40bbd5d403f0ebb1f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 21]: /images/20221022/06fbf866e8aa4bd8a879f6f45e8e41ca.png