day5——h5

浅浅的花香味﹌ 2021-12-04 01:11 393阅读 0赞

### Htlm5介绍 ###

##### 1.标签更具语义化 #####

例如：  
article定义一篇文章；nav:定义导航区；section：定义区域，相比div更优化，一个页面中不止用一次，aside:侧边栏；footer：页面底部（清除浮动，否则浮动到上层被覆盖）；header:头部；  
Eg：test1:语义化练习

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>htlm5标签语义化</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            header{
                height: 100px;
                background: #a2ff59;
            }
            nav{
                height: 50px;
                background: #cb829e;
            }
            section article{
                width: 60%;
                height:500px;
                background: #6adcb1;
                float: left;
            }
            section aside{
                width: 40%;
                height: 500px;
                float: right;
                background: #57b0ff;
            }
            section article header{
                height:150px;
                background: #926130;
            }
            footer{
                height: 100px;
                background: #ff0059;
                clear:both;/*清除浮动*/
            }
        </style>
    </head>
    <body>
    <header></header>
    <nav></nav>
        <section>
            <article>
                <header></header>
            </article>
            <aside></aside>
        </section>
    <footer></footer>
    
    </body>
    </html>

效果如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

##### 2.新增的多媒体标签：video定义视频；audio定义音频； #####

四种视频格式：MP4， ogg ，webm  
支持音频格式：ogg,mp3,wav  
浏览器格式不识别时使用文字注明

###### 1>Video的使用 ######

1.video回车输入文件路径  
2.video中不放路径，保留控件control（播放暂停按钮）,如果没有control则autoplay自动播放，loop=”loop”则循环播放  
使用source说明路径，顺序识别显示，若都识别失败显示文字  
Poster:加载等待时的画面/图片目录必须和html文件同层才能显示  
Eg:video.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    
    <video controls="controls" width="500" height="500" poster="PLMM.jpg">
        <source src="media/movie.ogg" type="video/ogg" />
        <source src="media/movie.webm" type="video/webm" />
        您的浏览器不支持视频标签，还不赶快升级。
    </video>
    </body>
    </html>

效果如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

###### 2>audio的使用 ######

同上

##### 3.新增标签： #####

###### 1>figure标签： ######

文字和图片为一体，其中标题文字用figcaption:定义figure内标题

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>figure元素使用</title>
    </head>
    <body>
    <p>桂林，位于广西东北部，是世界著名的旅游胜地和历史文化名城。地处漓江西岸，以盛产桂花桂树成林而得名。</p>
    <figure>
      <p>桂林山水甲天下</p>
      <img src="gl1.jpg" width="300" height="155" />
    </figure>
    </body>
    </html>

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

###### 2>detial: ######

描述文档中某个细节，与summary搭配使用

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>details元素应用</title>
    </head>
    <body>
    <details>
      <summary>红旗渠</summary>
      <p>红旗渠是20世纪60年代，林县人民在极其艰难的条件下，从太行山腰修建的引漳入林工程。是全国重点文物保护单位，被世人称之为“人工天河”，在国际上被誉为“世界第八大奇迹”。</p>
    </details>
    </body>
    </html>

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

###### 3>mark： ######

突出显示当前文字

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>mark元素</title>
    </head>
    <body>
    <p>今天，天气不错，<mark>心情</mark> 挺好的！</p>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][2019071913272267.png]

###### 4>progress: ######

显示进度条（静态），value:当前值；max:最大值

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>progress元素应用</title>
    </head>
    <body>
    项目的下载进度是：
    <progress value="20" max="100"> </progress>
    </body>
    </html>

效果如图  
![在这里插入图片描述][20190719132825463.png]

###### 5>meter: ######

衡量程度标签，value代表当前值，  
optimum：最优值—高于最高有效值则表示越高越好，此时输入高于最高有效值的数显示绿色，反之显示红色；低于最低有效值则表示越低越好，此时输入低于最低有效值的数显示绿色，反之显示红色  
high,low:最高最低有效值，其中高于有效值显示为绿色（根据最优值判断显示颜色），低于有效值显示为红色（根据最优值判断显示颜色）  
max,min:最大值最小值

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>meter元素应用</title>
    </head>
    <body>
    <p>11月份个人工作完成进度：</p>
    <p>付强：
      <meter value="10" optimum="100"         high="90" low="10" max="100" min="0"> </meter>
      <span> 10% </span>
      </p>
    <p>张红：
      <meter value="100" optimum="91"         high="90" low="10" max="100" min="0"> </meter>
      <span> 60% </span>
    </p>
    <p>王林：
      <meter value="89" optimum="100"         high="90" low="10" max="100" min="0"> </meter>
      <span> 89% </span>
    </p>
    </body>
    </html>

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

###### 6>menu:显示列表式菜单 ######

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>元素menu的使用</title>
    <style type="text/css">
    body {
    	font-size:12px ;　}
    menu {
    	padding:0;
    	margin:0;
    	display:block;
    	border: solid 1px #365167;
    	width:100px; 　}
    menu li {
    	list-style-type:none;
    	margin:2px;
    	height:25px;
    	width:80px; 　
    }
    menu li:hover {
    	border: solid 1px #7DA2CE;
    	background-color:#CFE3FD ;
    }
    </style>
    </head>
    <body>
    <p>选择你喜欢的颜色：</p>
    <menu>
    <li><input type="checkbox" />红色</li>
    <li><input type="checkbox" />黄色</li>
    <li><input type="checkbox" />绿色</li>
    <li><input type="checkbox" />蓝色</li>
    </menu>
    </body>
    </html>

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

###### 7>cite：斜字体 ######

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>cite元素的使用</title>
    <link href="Css/css3.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <p>不应有恨，何事长向别时圆;</p>
    <p>但愿人长久，千里共婵娟。</p> 
    <p align="center"> --- 引自 << <cite>水调歌头</cite> >> --- </p>
    </body>
    </html>

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

###### 8>file:选择文件并上传 ######

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>file对象应用</title>
    </head>
    <body>
    <h5>选择上传文件</h5>
    <form action="fileload.asp" method="get">
    <p><input name="file1" type="file" size="30"></p>
    <p><input name="file2" type="file" size="30"></p>
    </form>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]

###### 9>ul:无序列表嵌套使用 ######

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>图书分类信息</title>
    </head>
    <body>
    <ul>
      <li>计算机硬件</li>
      <li>计算机编程     
    	<ul>      
    		<li>程序设计</li>
          	<li>网络与数据通信</li>
    	</ul>  
      </li>
      <li>数据库
      	<ul>      
    		<li>Mysql</li>
          	<li>SQL SERVER</li>
    	</ul>  
      </li>
    </ul>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][20190719133425446.png]

###### 10> ol：有序列表，可修改列表序号 ######

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>ol列表的使用</title>
    <link href="Css/css3.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
     function Btn_Click()
     {
          var Num=document.getElementById("zhi").value;
    	  var Div=document.getElementById("ol");
          Div.setAttribute("start",Num);
     } 
    </script>
    </head>
    <body >
    期末成绩排名:
    <ol id="ol">
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
    </ol>
    修改列表编号:
    <input type="text" id="zhi" class="inputtxt" style="width:30px;" />
    <input type="button" value="确定" onClick="Btn_Click();">
    </body>
    </html>

效果如图：  
![在这里插入图片描述][20190719133540762.png]

###### 11>small:字体变小 ######

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>small</title>
    </head>
    <body>
    <h5>个人信息</h5>
    <ul>
     <li>张强 <small>男，26岁</small></li>
     <li>牛红 <small>女，22岁</small></li>
    </ul>
    </body>
    </html>

![在这里插入图片描述][20190719133658383.png]  
4.form表单—脱离原来的束缚  
1>新属性值  
格式:`<input type=”email”> <input type=”submit”>` //提交  
Email,url(网址)—限制输入格式，检测并提示  
Data—直接显示年月日，日期  
Time—显示几点几分，时间  
month—月 week—周  
number—数字（除e外，只能输入数字）  
range—滑动条  
search—搜索框 +results=”n”显示搜索图标及删除已输入字符  
color—字体颜色  
eg:

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <form action="" novalidate>
        邮箱：<input type="email"><br/>
        网址：<input type="url"><br/>
        时间：<input type="time"><br/>
        月：<input type="month"><br/>
        周：<input type="week"><br/>
        数字：<input type="number"><br/>
        比例：<input type="range"><br/>
        搜索：<input type="search" results="n">
        
        字体颜色：<input type="color">   <input type="submit"><br/>
    </form>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]  
2>–静止浏览器的自动验证  
3>Required—必填项  
4>Placeholder—提示信息  
5>autofocus—自动聚焦（增加用户体验）  
//聚焦到当前位置  
6>autocomplete=”on”—记录当行已输入值//需要提前给id记住要记录的位置  
7>用正则表达式设置输入内容格式 eg:pattern=”\[A~z\]3” //输入三位字母

Eg: autocomplete.html;     form2.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <form action="" autocomplete="on">
    
    <p><label for="username">用户名</label>
        <input type="text" id="username" placeholder="请输入用户名" autofocus/></p>
    
    <p><label for="pwd">密码：</label>
        <input type="password" id="pwd" autocomplete="off"/></p>
    
    <p><label for="pwd1"> <input type="checkbox" id="pwd1"/>忘记密码</label></p>
    
     <p><input type="submit"/>   <input type="reset"/></p>
    </form>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][20190719134146696.png]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <form action="">
        <p>用户名<input type="text" required placeholder="请输入用户名"/></p>
    
        <p>密码：<input type="password" autofocus/></p>
    
        <p><input type="submit"/></p>
    </form>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][20190719134337882.png]  
8>datalist  
  
//名称一致

透明度background: transparent;  
或background: rgba(255, 255, 255, 0.3)/*透明度百分之30*/

9>Input\{outline:none;\}//文本框或密码框选中后边框不变蓝  
10>Foucs:设置焦点选中时的样式，获取焦点，给焦点的背景时要附上图片路径，否则被背景色覆盖

与active的区别：active为仅鼠标点击时状态变化

Eg:form文件夹test.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>用户登陆</title>
        <style>
            body{
                background: url("bg.jpg") no-repeat left top;
            }
            section{
                width: 280px;
                height: 180px;
                margin: 70px 0 0 20px;
                border: solid 5px #e9e9e9;
                border-radius: 15px;
                padding-left: 15px;
            }
            section input[type="text"],section input[type="password"]{
                width: 180px;
                height: 30px;
                border: solid 2px #aaa;
                border-radius: 8px;
                outline: none;
                padding-left: 20px;
            }
            section input[type="text"]{
                background: rgba(255, 255, 255, 0.3)/*透明度百分之30*/ url(login-sprite.png) no-repeat 2px -10px;
            }
            section input[type="password"]{
                background: rgba(255, 255, 255, 0.3)/*透明度百分之30*/ url(login-sprite.png) no-repeat 2px -56px;
            }
            section input[type="text"]:focus{
                background: #fff url(login-sprite.png) no-repeat 2px -10px;;
                border-color: orange;
            }
            section input[type="password"]:focus{
                background: #fff url(login-sprite.png) no-repeat 2px -56px;;
                border-color: orange;
            }
            input[type="submit"]{
                width: 80px;
                height: 30px;
                background: orange;
                text-align: center;
                line-height: 30px;
                color: #930000;
                border: none;
                cursor: pointer;
                margin-left: 62px;
            }
            input[type="button"] {
                width: 80px;
                height: 30px;
                background: orange;
                text-align: center;
                line-height: 30px;
                color: #930000;
                border: none;
                cursor: pointer;
                margin-left: 15px;
            }
        </style>
    </head>
    <body>
    <section>
        <form action="" id="myform" method="get"> </form>
        <p>用户名：<input type="text" form="myform" autocomplete="on" name="username" placeholder="username" required autofocus/></p>
        <p>密 码：<input type="password" form="myform" placeholder="password" required/></p>
        <p><input type="submit" value="登陆" form="myform"/>
        <input type="button" value="我要注册" form="myform"/></p>
    </section>
    </body>
    </html>

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 6]  
11>定位练习  
section input\[type=“text”\]\{  
background: rgba(255, 255, 255, 0.3)/*透明度百分之30*/ url(login-sprite.png) no-repeat 2px -10px;  
\}  
关于背景图片定位：左上角为0,0点，往右往下为left和top的正值，可以直接模糊定位left,right,top,center等，也可以给数字精确定位，或给百分比相对移动

Eg：test2

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>定位练习</title>
        <style>
            section{
                width: 400px;
                height: 500px;
                background: pink url("bg.gif") no-repeat -50px;
            }
        </style>
    </head>
    <body>
    <section></section>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 7]  
5.选中效果为，而鼠标放上去效果为hover  
section input\[type=“text”\]:focus\{  
background: \#fff url(login-sprite.png) no-repeat 2px -10px;;  
border-color: orange;  
\}  
6.了解更多 | 反馈意见  
加竖线的两种方法：  
1>直接加：  
了解更多 | 反馈意见  
2>间接给样式：  
header a:first-of-type\{  
border-right:solid 1px \#999;  
padding-right: 10px;  
margin-right: 10px;  
\}

7.综合练习

网页设计思路  
首先建立html网页，将网页划分好头部，主要内容（可更详细划分）及脚部  
其次建立一个公用css样式（一般情况下每个页面都需要的样式）  
最后建立相应内容需要的css样式

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>网易邮箱注册</title>
        <link rel="stylesheet" href="css/commen.css"/>
        <link rel="stylesheet" href="css/index.css"/>
    </head>
    <body>
    <header>
        <a href="">了解更多</a><a href="">反馈意见</a>
    </header>
    <section class="content">
        <h3>欢迎注册无限容量的网易邮箱，邮箱地址可以登录使用其他网易其下产品</h3>
        <section class="fl">
            <h4>
                <span>注册字母邮箱</span>
                <span class="on">注册手机号码邮箱</span>
                <span>注册VIP邮箱</span>
            </h4>
            <p><label for="username"><i>*</i>手机号码</label><input type="text" id="username"/>@163.com<Br>
            <span>请填写手机号码</span>
            </p>
            <p class="yzcode"><label for="yzm"><i>*</i>图片验证码</label><input type="text" id="yzm"/>
               <b><img src="images/call.jpg" alt=""/><br><a href="">看不清楚？换张图片</a></b>
                <br>
                <span>请填写图片中的字符，不区分大小写</span>
                <br>
                <span><input type="button" value="免费获取验证码" class="freecode"/></span>
            </p>
            <p><label for="mobeil"><i>*</i>短信验证码</label><input type="text" id="mobeil" class="input"/><Br>
            <span>请查收短信，并填写短信中的验证码</span>
            </p>
            <p><label for="pwd"><i>*</i>密码</label><input type="password" id="pwd" class="input"/><Br>
                <span>6~16个字符，区分大小写</span></p>
            <p><label for="pwd1"><i>*</i>确认密码</label><input type="password" id="pwd1" class="input"/><Br>
                <span>请再次确认密码</span></p>
            <p><label for=""></label><input type="checkbox"/>同意 <a href="">"用户须知"</a>和<a href="">"隐私权相关政策"</a></p>
            <p><label for=""></label><button>立即注册</button></p>
        </section>
        <aside class="fr"><img src="images/reg_master.gif" alt=""/></aside>
    </section>
    <footer>
        <a href="">关于网易</a>
        <a href="">关于网易</a>
        <a href="">关于网易</a>
        <a href="">关于网易</a>
    </footer>
    </body>
    </html>

common.css:

*{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }
    body{
        font-size: 12px;
        background: #f9f9f9;
    }
    .fl{
        float:left;}
    .fr{
        float:right;
    }
    .clear{
        clear:both;
    }
    a{
        text-decoration: none;
    }
    ul,li{
        list-style: none;
    }

index.css

header,section.content{
        width:1000px;
        margin: auto;
    }
    header{
        height:100px;
        background:url(../images/glb_v2.png) no-repeat left 30px;
        text-align: right;
        padding-top: 40px;
        color:#999;
    }
    header a{
        color:#0086b3;
        font-size: 12px;
    }
    header a:first-of-type{
        border-right:solid 1px #999;
        padding-right: 10px;
        margin-right: 10px;
    }
    .content h3{
        height:37px;
        background: url(../images/bgx.png) repeat-x;
        line-height:37px;
        color:#fff;
        font-weight: normal;
        padding-left: 20px;
    }
    .content section{
        width:700px;
        height:524px;
        background: #fff;
        border:solid 1px #f1f1f1;
        padding-top: 50px;
    }
    .content section input[type="text"]{
    width:200px;
        height:25px;
        border:solid 1px #c3c3c3;
        border-radius: 5px;
    }
    .content section .input{
        width:400px!important;
        height:25px;
        border:solid 1px #c3c3c3;
        border-radius: 5px;
    }
    .content aside{
        height:524px;
        width:300px;
        text-align: center;
        padding-top:80px;
        border:solid 1px #f1f1f1;
        border-left:none;
    }
    .content section h4{
        width:412px;
        height:35px;
        margin:auto;
        background:url(../images/tab.jpg) no-repeat center -58px;
        color:#999;
    }
    .content section h4 span{
        width:33%;
        text-align: center;
        display: block;
        float:left;
        height:35px;
        line-height: 35px;
    }
    .content h4 span.on{
        color:#fff;
    }
    .content section p{
        line-height:20px;
        padding:10px 0 10px 30px;
    }
    .content section p label{
        width:100px;
        text-align: right;
        display: inline-block;
        margin-right: 15px;
    }
    .content section  p i{
        margin-right:5px ;
        color:red;
        font-style: normal;
    }
    .content section p>span{
        margin-left: 115px;
        color:#999;
    }
    .content section .yzcode{
        position: relative;
        width:100%;
    }
    .content .yzcode b{
        position: absolute;
        left:350px;
        top:0;
        font-weight: normal;
    }
    .content .yzcode a{
        color:#0086b3;
    }
    .freecode{
        width:150px;
        height:30px;
        border:solid 1px #efefef;
        border-radius: 5px;
        background:url(../images/bgx.png) repeat-x left -62px;
        margin-top: 10px;
    }
    .content button{
        width:120px;
        height:37px;
        background: url(../images/glb_v2.png) no-repeat left -360px;
        color:#fff;
        text-align: center;
        line-height: 37px;
        border:none;cursor: pointer;
    }
    .content button:active{
        background: url(../images/glb_v2.png) no-repeat -288px -360px;
    
    }
    footer{
        height:50px;
        line-height: 50px;
        text-align: center;
        clear: both;
    }
    footer a{
        color: rgba(49, 68, 38, 0.4);
    }

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211203/a58a5294b3a9482da602562b1a2354fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20211203/ab088d2bed12482e95c73ef4313608bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: /images/20211203/f0d7bcadb8ee42bf823a1fbf2b4b637b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: /images/20211203/3babc6acbbf24e11a16bf74f6730a048.png
[20190719132007167.png]: /images/20211203/c71a8c69a10b4c618f9a8f8e5d5847d1.png
[2019071913272267.png]: /images/20211203/0f302defda7947998b00b5a89544655e.png
[20190719132825463.png]: /images/20211203/aa28a519d09b4124b2326d8bea1c6a35.png
[20190719132941955.png]: /images/20211203/4d6965bae5ce4f998ed4c72e5be9fd51.png
[20190719133048228.png]: /images/20211203/b2a94a17bed0454baf2a3743b17d7e3e.png
[20190719133153396.png]: /images/20211203/a4e6736380324b12aa66a53b319bbef3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: /images/20211203/54c695ba79084fcc9b7ad930fb4a2103.png
[20190719133425446.png]: /images/20211203/7c4030fe5cea419e96365219056881fc.png
[20190719133540762.png]: /images/20211203/9b260ffb69e74a479b33d4f55cd46134.png
[20190719133658383.png]: /images/20211203/405b0b7976c8455f85ef0771b2ee0386.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 5]: /images/20211203/d07d87111bda43ad919e58ae09a6419d.png
[20190719134146696.png]: /images/20211203/2cc99a8328f149e5846950377a66c5e5.png
[20190719134337882.png]: /images/20211203/57afb05f5537475797e97f830e61f8c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 6]: /images/20211203/9fac5d303e8a492b9d59af9b2d9330b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 7]: /images/20211203/36f2ab22f393403ba26316bf4744f086.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 8]: /images/20211203/4a0ef5c2e49a45acb38b81bed0795975.png