day5——h5 浅浅的花香味﹌ 2021-12-04 01:11 394阅读 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 src="media/movie.webm" controls> 浏览器该换啦,太LOW了 </video>--> <!--多个视频,从上至下若有错误则播放下一视频--> <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><!--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"> <!--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"><!--autocomplete记录当前值--> <p><label for="username">用户名</label> <input type="text" id="username" placeholder="请输入用户名" autofocus/></p><!--autofocus聚焦当前行--> <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
还没有评论,来说两句吧...