Web前端 基础（03）

网友投稿 615 2022-05-30

课程回顾

表单:

下拉选按钮: <input type="submit/reset/button" value="显示文本"> <button>按钮</button></p><p>实体引用: & nbsp ; & lt ; & gt ;</p><p>分区标签: div独占一行 span共占一行 h5新增标签:header footer section nav article</p><p>CSS:层叠样式表美化页面</p><p>三种引入方式:</p><p>内联: 在标签内部添加style属性不能复用</p><p>内部: 在head标签里面添加style标签,标签体内写样式代码, 可以当前页面复用</p><p>外部: 在单独的css文件中写样式代码在html页面中通过link标签引入,可以多页面复用,还可以将html和css代码分离</p><p>选择器</p><p>div{}</p><p>#id{}</p><p>.class{}</p><p>div,#id{},.class{}</p><p>input[type=‘text’]{}</p><p>*{}</p><p>div span{}</p><p>div>span{}</p><p>a:hover/link/active/visited{}</p><p>颜色赋值</p><p>red</p><p>#ff0000</p><p>#f00</p><p>rgb(255,0,0)</p><p>rgba(255,0,0,0-1)</p><p>背景图片</p><p>background-image:url();</p><p>background-size:200px 300px;</p><p>background-repeat:no-repeat;禁止重复</p><p>background-position:横向百分比纵向百分比</p><p>显示方式display</p><p>block:块级元素, 独占一行,可以修改宽高,包括:div h1-h6 p等</p><p>inline:行内元素,共占一行,不能修改宽高,包括:span,b,i,small等</p><p>inline-block:行内块元素,共占一行,也能修改宽高,包括:img,input等</p><p>文本和字体相关</p><p>文本修饰 text-decoration: overline/underline/line-through/none</p><p>文本阴影 text-shadow: 颜色 x偏移值 y偏移值浓度(值越小越清晰)</p><p>文本颜色 color:red;</p><p>行高 line-height:20px; 可以通过行高控制垂直居中</p><p>字体大小 font-size:20px;</p><p>加粗 font-weight: bold/normal(去掉加粗效果);</p><p>斜体 font-style:italic;</p><p>字体设置 font-family:xxx,xxx,xxx; font:30px xx,xxx,xxx;</p><p>CSS的三大特性</p><p>继承性:元素可以继承上级元素的文本和字体相关样式. 部分元素自身效果不受继承影响比如:h1-h6的字体大小,超链接字体颜色.</p><p>层叠性:多个选择器有可能选择到同一个元素,如果添加的样式不同会全部层叠生效,如果添加的样式相同则由优先级决定</p><p>优先级:作用范围越小,优先级越高. id>class>标签名>继承(属于间接选中)</p><p>盒子模型</p><p>盒子模型=外边距+边框+内边距+宽高</p><p>宽高: 用来控制元素显示大小</p><p>边框: 控制元素的边框效果</p><p>外边距: 控制元素显示位置</p><p>内边距: 控制元素内容的位置</p><p>赋值方式:两种</p><p>像素,单位是px</p><p>上级元素的百分比</p><p>如果只设置宽度高度会等比例缩放</p><p>行内元素不能修改宽高</p><p>盒子模型之外边距margin</p><p>什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距</p><p>赋值方式:</p><p>单独给某一个方向赋值: margin-left/right/top/bottom:10px;</p><p>四个方向赋值: margin:50px;</p><p>上下和左右赋值: margin:10px 20px;</p><p>元素水平居中 margin:0 auto;</p><p>(==注意这是让元素自身居中,text-align:center是让元素里面的文本在元素内部居中==)</p><p>上右下左赋值: margin:10px 20px 30px 40px; 顺时针</p><p>上下相邻两个元素的外边距取最大值,左右相邻求和</p><p>粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连显示异常,给上级元素添加overflow:hidden解决,给上级元素添加边框也可以解决(修改了元素原来的样子,不推荐)</p><p>h1,p,body这些元素自带外边距,使用时需要注意.</p><p>盒子模型之边框border</p><p>赋值方式:</p><p>单独给某一个边添加边框 border-left/right/top/bottom: 粗细样式颜色;</p><p>给四个方向添加边框 border:粗细样式颜色;</p><p>圆角: border-radius: 10px; 值越大越圆超过宽高的一半时会变为圆形(前提是正方形)</p><p>盒子模型之内边距padding</p><p>什么是内边距: 元素边缘距内容的距离称为内边距.</p><p>赋值方式和外边距类似:</p><p>单独给某一个方向赋值: padding-left/right/top/bottom:10px;</p><p>四个方向赋值: padding:50px;</p><p>上下和左右赋值: padding:10px 20px;</p><p>上右下左赋值: padding:10px 20px 30px 40px; 顺时针</p><p>修改元素的内边距会影响元素的宽高</p><p>如果需要移动元素内的子元素有两种方式:</p><p>给大元素添加内边距去移动里面的小元素,这种方式会改变大元素的尺寸(不推荐使用)</p><p>给小元素添加外边距即可.</p><p>练习：</p><p>1.外边距</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ margin: 0;/*去掉body自带的8个像素外边距*/ } h1{ margin-bottom: 0; background-color: #008000; } p{ margin-top: 0; background-color: #0000FF; } #big{ width:200px; height:200px; background-color: red; overflow: hidden;/* 解决粘连显示异常*/ } #small{ width:50px; height:50px; background-color: green; margin-left: 50px; /*粘连问题:当元素的上边缘和上级元素的上边缘重叠时给元素添加.上外边距会出现粘连显示异常,通过给上级元素添加overflow:hidden解决*/ margin-top: 50px; } #d1{ width:100px; height:100px; background-color: red; /* 四个方向各50 */ /* margin:50px; */ /* 上下50px 左右100px */ /* margin: 50px 100px; */ /* 设置元素上下外边距0 水平居中 */ /* margin: 100px auto; */ /* 上右下左顺时针赋值 */ /* margin: 20px 40px 60px 80px; */ } #d2{ width:100px; height:100px; background-color: blue; margin-left: 100px; margin-top: 50px; } #s1{ margin-left: 50px; margin-right: 50px; /* 行内元素上下外边距无效 */ margin-top: 50px; } #s2{ /* 左右相邻外边距是求和上下相邻外边距是取最大*/ margin-left: 30px; } </style> </head> <body> <div id="big"> <div id="small"> </div> </div> <h1>这是h1</h1> <span id="s1"> 这是span1 </span> <span id="s2"> 这是span2 </span> <p>这是p标签</p> <div id="d1"></div> <div id="d2"></div> </body> </html></p><p>显示效果：</p><p>2.外边距练习</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width:120px; height:80px; background-color: red; margin-left: 100px; overflow: hidden; margin-top: 80px; } #d2{ width:120px; height:80px; background-color: blue; margin-left: 220px; } #small{ width:50px; height:40px; background-color: yellow; margin-left: 70px; margin-top: 20px; </style> </head> <body> <div id="d1"> <div id="small"> </div> </div> <div id="d2"></div> </body> </html></p><p>显示效果：</p><p>3.边框</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h3{ /* 单独给某一个方向添加边框 */ border-bottom: 1px solid red; text-align: center; } div{ width: 200px; height: 200px; border: 1px solid red; /* 圆角值越大越圆 */ border-radius: 200px; } a{ /*宽高132*40 颜色#Oaaled */ width: 132px; height: 40px; background-color: #0aa1ed ; display: block; text-align: center; line-height: 40px; color: white ; text-decoration: none ; border-radius: 3px; font-size: 20px; } </style> </head> <body> <a href="#">查看详情</a> <h3>边框测试</h3> <div>这是一个div</div> </body> </html></p><p>测试效果：</p><p>4.内边距</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1 { width: 100px; height: 100px; border: 1px solid red; /* 添加内边距会影响元素的宽高 */ padding-top: 20px; padding-left: 50px; } #d2,#d3 { width: 100px; height: 100px; border: 1px solid red; } div>div { width: 25px; height: 25px; background-color: green; } #d2{ padding: 25px 0 0 25px; width: 75px ; height: 75px; } #d3>div{ /*除了给上级元素添加overflow:hidden可以解决粘连问题,给上级元素添加边框也能解决*/ margin: 25px 0 0 25px; } </style> </head> <body> <div id="d1">内边距测试</div> <div id="d2"> <div></div> </div> <div id="d3"> <div></div> </body> </html></p><p>测试效果：</p><p>5.学子商城练习1</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font: 12px "simhei",Arial, Helvetica, sans-serif; color: #666; } a{ /*宽高132*40 颜色#Oaaled */ width: 132px; height: 40px; background-color: #0aa1ed ; display: block; text-align: center; line-height: 40px; color: white ; text-decoration: none ; border-radius: 3px; font-size: 20px; } #d1>div { width: 245px; height: 232px; margin: 68px 0 0 36px; } #d1{ width: 611px; height: 376px; background-color: #e8e8e8; /*设置背景图片*/ background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png); background-size: 318px 319px; background-repeat: no-repeat ; background-position: 90% 70%; overflow: hidden; } #p1{ font-size: 32px; color: #333; } #p3{ font-size: 24px; font-weight: bold; color: #0aa1ed; } </style> </head> <body> <div id="d1"> <div> <p id="p1">灵越燃7000系列</p> <p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br /> 英特尔HD显卡620含共享显卡内存</p> <p id="p3">￥999999.99</p> <a href="#">查看详情</a> </div> </div> </body> </html></p><p>显示效果：</p><p>6.学子商城练习2</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font: 12px "simhei",Arial, Helvetica, sans-serif; color: #666; } a{ /*宽高132*40 颜色#Oaaled */ width: 132px; height: 40px; background-color: #0aa1ed ; display: block; text-align: center; line-height: 40px; color: white ; text-decoration: none ; border-radius: 3px; font-size: 20px; } #d1>div { width: 253px; height: 232px; margin: 39px 0 0 25px; } #d1{ width: 400px; height: 376px; background-color: #e8e8e8; /*设置背景图片*/ background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png); background-size: 290px 232px; background-repeat: no-repeat ; background-position: 90% 90%; overflow: hidden; } #p1{ font-size: 32px; color: #333; } #p3{ font-size: 24px; font-weight: bold; color: #0aa1ed; } </style> </head> <body> <div id="d1"> <div> <p id="p1">颜值框不住</p> <p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br /> 英特尔HD显卡620含共享显卡内存 <p id="p3">￥999999.99</p> <a href="#">查看详情</a> </div> </div> </body> </html></p><p>显示效果：</p><p>7.学子商城练习3</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font: 12px "simhei",Arial, Helvetica, sans-serif; color: #666; } a{ /*宽高132*40 颜色#Oaaled */ width: 100px; height: 24px; background-color: #0aa1ed ; display: inline-block; text-align: center; line-height: 24px; color: white ; text-decoration: none ; border-radius: 3px; font-size: 12px; } div{ width: 210px; height: 233px; background-color: #e8e8e8; background-size: 290px 232px; background-repeat: no-repeat ; background-position: 90% 90%; overflow: hidden; text-align: center; } #p1{ margin: 0; font-weight: bold; } #p2{ margin:4px; font-weight: bold; color: #0aa1ed; } </style> </head> <body> <div> <img src="https://www.huoban.com/news/zb_users/upload/2022/05/20220530132009_50205.png" > <p id="p1">戴尔(DELL)XPS13-9360-R1609 13.3英<br> 寸微边框笔记本电脑</p> <p id="p2">￥4600.00</p> <a href="#">查看详情</a> </div> </body> </html></p><p>显示效果：</p><p>web前端</p><p> <strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong> </p></div> <div class="article_footer clear"> <div class="fr tag">标签：<a href="https://www.huoban.com/news/tags-1610.html">前端</a> <a href="https://www.huoban.com/news/tags-164.html">基础</a> </div> <div class="bdsharebuttonbox fl share"> <div class="share-widget fl"> <div class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div>  <div class="post-navigation clear"> <div class="post-previous fl"> <span>上一篇:</span><a href="https://www.huoban.com/news/post/16006.html">Docker NS详解</a> </div> <div class="post-next fr"> <span>下一篇:</span><a href="https://www.huoban.com/news/post/16008.html">四大云原生行业解决方案之大企业【我们都是华为云专家】</a> </div> </div> </div> <div class="related_article"> <div class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相关文章</span> </div> <div class="related_list clear"> <article class="fl"> <div class="related_img"><a href="https://www.huoban.com/news/post/45808.html"><img src="https://www.huoban.com/news/zb_users/cache/ly_autoimg/n/NDU4MDg.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.huoban.com/news/post/45808.html" title="前端开发的核心技术是什么（web前端核心技术）">前端开发的核心技术是什么（web前端核心技术）</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>615</span> <span><i class="fa fa-clock-o"></i>2022-05-30</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.huoban.com/news/post/45681.html"><img src="https://www.huoban.com/news/zb_users/cache/ly_autoimg/n/NDU2ODE.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.huoban.com/news/post/45681.html" title="大数据技术的基础技能包括什么（大数据技术的基础是什么）">大数据技术的基础技能包括什么（大数据技术的基础是什么）</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>615</span> <span><i class="fa fa-clock-o"></i>2022-05-30</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.huoban.com/news/post/45572.html"><img src="https://www.huoban.com/news/zb_users/cache/ly_autoimg/n/NDU1NzI.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.huoban.com/news/post/45572.html" title="最基础办公软件有哪些?（基础办公软件是什么）">最基础办公软件有哪些?（基础办公软件是什么）</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>615</span> <span><i class="fa fa-clock-o"></i>2022-05-30</span> </div> </div> </article> </div> </div>  </div> </div> <div class="sidebar"> <div id="推荐文章" class="part clear 推荐文章"> <div class="top"> <h3 class="title">推荐文章</h3> </div> <div class="side 推荐文章"><ul><ul class="hot_posts"> <li><h4><a href="https://www.huoban.com/news/post/132763.html" title="企业生产管理是什么，企业生产管理软件">企业生产管理是什么，企业生产管理软件</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/136160.html" title="盘点进销存软件排行榜前十名">进盘点进销存软件排行榜前十名</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132779.html" title="进销存系统哪个简单好用？进销存系统优点">进销存系统哪个简单好用？进销存系统优点</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/133648.html" title="工厂生产管理（工厂生产管理流程及制度）">工厂生产管理（工厂生产管理流程及制度）</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132780.html" title="生产管理软件，机械制造业生产管理，制造业生产过程管理软件">生产管理软件，机械制造业生产管理，制造业生产过程管理软件</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132776.html" title="进销存软件和ERP有什么区别？进销存与erp软件理解">进销存软件和ERP有什么区别？进销存与erp软件理解</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132974.html" title="进销存如何进行库存管理">进销存如何进行库存管理</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132269.html" title="excel销售订单管理系统（销售订单录入系统）">如何利用excel制作销售订单管理系统？</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/136946.html" title="数据库订单管理系统有哪些功能？数据库订单管理系统怎么设计？">数据库订单管理系统有哪些功能？数据库订单管理系统怎么设计？</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/132312.html" title="数据库订单管理系统（订单系统数据流图）">什么是数据库管理系统？</a></h4></li></ul></ul></div> </div> <div id="divPrevious" class="part clear previous"> <div class="top"> <h3 class="title">最近发表</h3> </div> <div class="side divPrevious"><ul><li><a title="提升软件开发与招投标效率的五个方法与技术方案" href="https://www.huoban.com/news/post/157788.html">提升软件开发与招投标效率的五个方法与技术方案</a></li> <li><a title="提升软件开发效率与招投标质量的五个方法" href="https://www.huoban.com/news/post/157787.html">提升软件开发效率与招投标质量的五个方法</a></li> <li><a title="提升软件开发与招投标效率：AI智写助手如何优化智能文档编写" href="https://www.huoban.com/news/post/157786.html">提升软件开发与招投标效率：AI智写助手如何优化智能文档编写</a></li> <li><a title="提升软件开发与招投标效率：AI智写助手如何实现智能文档编写" href="https://www.huoban.com/news/post/157785.html">提升软件开发与招投标效率：AI智写助手如何实现智能文档编写</a></li> <li><a title="提升软件开发与招投标文档编写效率的AI智写助手" href="https://www.huoban.com/news/post/157784.html">提升软件开发与招投标文档编写效率的AI智写助手</a></li> <li><a title="网店运营的关键从订单管理到用户体验" href="https://www.huoban.com/news/post/157783.html">网店运营的关键从订单管理到用户体验</a></li> <li><a title="选择适合你的库存盘点软件指南" href="https://www.huoban.com/news/post/157782.html">选择适合你的库存盘点软件指南</a></li> <li><a title="电商ERP解决方案助力企业实现业务飞跃" href="https://www.huoban.com/news/post/157781.html">电商ERP解决方案助力企业实现业务飞跃</a></li> <li><a title="云ERP：企业高效管理与数字化转型的利器" href="https://www.huoban.com/news/post/157780.html">云ERP：企业高效管理与数字化转型的利器</a></li> <li><a title="销售报表分析的秘密，掌握数据让业绩飞跃" href="https://www.huoban.com/news/post/157779.html">销售报表分析的秘密，掌握数据让业绩飞跃</a></li> </ul></div> </div> <div id="sidebar_ad" class="part clear sidebar_ad"> <div class="part sidebar_ad"><div class="active"><a href='https://mrhnug.r.huobanbot.com/wxwork/pub/landings/426?app_id=1960&company_id=54&corp_id=wwbd4b7b6e7b0ccdaa&app_company_id=1' target='_blank'><img style='width:100%;height:100%' src='https://www.huoban.com/news/zb_users/upload/2023/08/erwei3.jpg'></a><br> <a href='https://www.huoban.com/crm.html?utm=jiasouadv' target='_blank'><img style='width:100%;height:100%' src='https://www.huoban.com/news/zb_users/upload/2023/03/20230321171645167939020583758.png'></a><br> </div></div> </div> <div id="hot_posts" class="part clear hot_posts"> <div class="top"> <h3 class="title">热评文章</h3> </div> <ul class="hot_posts"><li><h4><a href="https://www.huoban.com/news/post/104011.html" title="零代码开发是什么？2022低代码平台排行榜">零代码开发是什么？2022低代码平台排行榜</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/131019.html" title="智能进销存库存管理系统（智慧进销存）">智能进销存库存管理系统（智慧进销存）</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/73907.html" title="在线文档哪家强？8款在线文档编辑软件推荐">在线文档哪家强？8款在线文档编辑软件推荐</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/102663.html" title="WPS2016怎么绘制简单的价格表?">WPS2016怎么绘制简单的价格表?</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/35776.html" title="什么是在线文档？怎么发在线文档">什么是在线文档？怎么发在线文档</a></h4></li><li><h4><a href="https://www.huoban.com/news/post/76010.html" title="用在线电子表格，居家办公更轻松">用在线电子表格，居家办公更轻松</a></h4></li></ul> </div> <div id="divLinkage" class="part clear link"> <div class="top"> <h3 class="title">友情链接</h3> </div> <div class="side divLinkage"><ul><li class="link-item"><a href="https://www.huoban.com/" target="_blank" title="伙伴云">伙伴云</a></li><li class="link-item"><a href="https://www.huoban.com/news/category-19.html" title="进销存管理">进销存管理</a></li><li class="link-item"><a href="https://www.huoban.com/news/category-3.html" title="低代码">低代码</a></li><li class="link-item"><a href="https://www.huoban.com/news/tags-12.html" target="_blank" title="Excel表格">Excel表格</a></li><li class="link-item"><a href="http://www.lvyuanlin.net/" title="海威行">海威行</a></li><li class="link-item"><a href="https://www.finclip.com/news/" title="FinClip">FinClip</a></li></ul></div> </div> </div> </div> </section> </div> <footer class="p-footer"> <div class="contant_box"> <div class="discover_tmt"> <h5 class="" style="font-size: 1px; color: white;">伙伴云</h5> <div class="text_box"> <a href="https://www.jiasou.cn/article/" title="toB数字化营销SEO" style="font-size: 1px; color: white;">加搜toBSEO</a> <a href="https://www.finclip.com/news/category-1.html" title="小程序工具" style="font-size: 1px; color: white;">前端框架</a> <a href="https://www.jia-ai.com/info/" title="小红书营销攻略" style="font-size: 1px; color: white;">小红书营销攻略</a> <a href="https://www.yanyin.tech/cms/" title="生物研究资讯" style="font-size: 1px; color: white;">生物研究资讯</a> <a href="https://www.finclip.com/news/" title="FinClip 技术文档" style="font-size: 1px; color: white;">小程序容器帮助中心</a> <a href="https://www.finclip.com/news/article/" title="小程序开发行业洞察" style="font-size: 1px; color: white;">小程序开发行业洞察</a> <a href="https://www.foneplatform.com/jscms/" title="全面预算管理资讯" style="font-size: 1px; color: white;">全面预算管理资讯</a> <a href="https://www.weiling.cn/article/" title="企微SCRM客户管理干货" style="font-size: 1px; color: white;">企微SCRM客户管理干货</a> <a href="https://www.marketup.cn/info/" title="营销管理系统资讯" style="font-size: 1px; color: white;">营销管理系统资讯</a> <a href="https://www.transfertech.cn/news/" title="制造行业新闻动态" style="font-size: 1px; color: white;">制造行业新闻动态</a> <a href="https://www.i2cool.com.cn/tideflow/" title="无电制冷行业资讯" style="font-size: 1px; color: #22292D;">无电制冷行业资讯</a> </div> </div> <div class="collaboration_box"> </div> <div class="we_img_box clear"> <div class="img_box"> <img src="https://www.huoban.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt"> </div> </div> </div> <p class="info"> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">京ICP备12038259号</a> <span> <a href="#"></a></span> </p> </footer> <div id="backtop" class="backtop"> <div class="bt-box top"> <i class="fa fa-angle-up fa-2x"></i> </div> </div> <script charset="UTF-8" src="https://www.huoban.com/assets/js/sensorsdata.1.22.2.min.js"></script> <script charset="UTF-8"> var sensors = window['sensorsDataAnalytic201505']; sensors.init({ server_url: 'https://saapi.huoban.com/sa?project=production', heatmap:{scroll_notice_map:'not_collect'}, use_client_time:true, send_type:'beacon' }); sensors.quick('autoTrack'); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6444c045836d6bf27124085a4f62c2a8"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (()=>{const e="https://analyze.jiasou.cc/api/v1/page_view/report/",n="9fe06d4884e0461caaa1de5651164d43";let t=null;const o=new Proxy({},{get:(e,n)=>localStorage.getItem(window.btoa(n)),set:(e,n,t)=>!!t&&(localStorage.setItem(window.btoa(n),t),!0)});new Promise((t=>{if(o.fingerprint)t();else{const a=function(){var e={};if(e.userAgent=navigator.userAgent||"",e.plugins=[],navigator.plugins&&navigator.plugins.length>0)for(var n=0;n<navigator.plugins.length;n++){var t={name:navigator.plugins[n].name||"",filename:navigator.plugins[n].filename||"",description:navigator.plugins[n].description||""};e.plugins.push(t)}e.languages=navigator.languages||[navigator.language||""],e.timezone=(new Date).getTimezoneOffset(),e.screenResolution={width:window.screen.width||0,height:window.screen.height||0,pixelDepth:window.screen.pixelDepth||0,colorDepth:window.screen.colorDepth||0};var o=document.createElement("canvas").getContext("2d"),a=[],i=["monospace","sans-serif","serif"];for(n=0;n<i.length;n++){var r=i[n];o.font="12px "+r,o.measureText("abcdefghijklmnopqrstuvwxyz0123456789").width>0&&a.push(r)}return e.fonts=a,e.cookieEnabled=navigator.cookieEnabled||!1,e.localStorage=void 0!==window.localStorage,e.sessionStorage=void 0!==window.sessionStorage,e.doNotTrack="1"===navigator.doNotTrack||"1"===window.doNotTrack||"1"===navigator.msDoNotTrack||"yes"===navigator.doNotTrack,e}();fetch(`${e}u/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:n,f:window.btoa(JSON.stringify(a))})}).then((e=>{console.debug("browser fingerprint sent"),200===e.status&&e.json().then((e=>{console.debug("browser fingerprint received",e),o.fingerprint=e.fp,t()}))}))}})).then((()=>{e&&o.fingerprint&&fetch(e+`?${new URLSearchParams({token:n}).toString()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({c:window.btoa(JSON.stringify({u:o.fingerprint,l:window.location.href,r:document.referrer}))})}).then((e=>{200==e.status&&e.json().then((e=>{e.track_id&&(t=e.track_id)}))}))})),window.addEventListener("beforeunload",(async n=>{t&&fetch(e+`?${new URLSearchParams({track_id:t}).toString()}`,{method:"GET",headers:{"Content-Type":"text/plain"},keepalive:!0}),n.returnValue=""}))})(); </script><script language="javascript" src="https://www.huoban.com/news/zb_users/plugin/ZF_ad/js/index.js?id=513"></script> <script language="javascript" src="https://www.huoban.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script> </body> </html>