学习网页技术：彻底弄懂CSS盒子模式之五

2022-07-15 80酷酷网 80kuku.com

　　css|网页

在本人上一篇教程《彻底弄懂CSS盒子模式四(绝对定位和相对定位)》中最后有演示一个综合导航实例，那时因为时间关系，同时本人也觉得有必要将这实例分出来单独讲一下，所以没有把实例讲解教程写到上一篇教程中。这个教程可以作为CSS定位学习的强化练习，当然教程我也不只是单一的讲解做的步骤，还会和大家一起来分析一下设计思路，同时分享本人在做的过程中发现的一些问题供大家防范参考。为了兼顾一下没有来得及看我上一篇教程的网友，我再次给出代码运行框，大家可以先运行看看效果，不过建议最好先看一下本人上一篇教程，除非你已对定位有所了解。另外本实例还是不够完善的，比如结构的规范等等，如果你能有更好的实现方法，不妨在回复中写出来与大家分享，同时也让我这个积极的菜鸟学习下。

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>相对定位和绝对定位实例--作者：唐国辉</title><style type="text/css"><!--*{ margin:0px; padding:0px;}body { margin:10px; font-size: 13px;}a:link { color: #666; text-decoration: none;/*去除链接下划线* <br><br> <p></p> </div> </article><div class='kePublic'><div id="dsds888" style='display:none'></div><div class='clearfix'></div> <div class='gb_resLay'> <div class='gb_res_t'><span>分享到</span><i></i></div> <div class='bdsharebuttonbox'> <ul class='gb_resItms'> <li><a title='分享到微信' href='javascript:;' style='background: url(/a/images/gbRes_2.png) no-repeat center center/60px 60px;' onclick='wxfx118();'></a>微信分享</li> <li><a title='分享到新浪微博' href='javascript:;' style='background: url(/a/images/gbRes_6.png) no-repeat center center/60px 60px;' onclick='wbfx118()'></a>新浪微博</li> <li><a title='分享到QQ好友' href='javascript:;' style='background: url(/a/images/gbRes_3.png) no-repeat center center/60px 60px; ' onclick="hyfx118()"></a>QQ好友</li> <li><a title='分享到QQ空间' href='javascript:;' style='background: url(/a/images/gbRes_4.png) no-repeat center center/60px 60px;' onclick="qqfx118()" ></a>QQ空间</li> </ul> </div> </div> <div class='clearfix'></div></div> <div class='clearfix'></div> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis"> <span class="prev iconfont icon-toleft">上一篇</span><strong><a href='/itzs/50161.shtml' title='web标准化设计：常用的CSS命名规则'>web标准化设计：常用的CSS命名规则</a> </strong> </p> <p class="post-next fr ellipsis"> <span class="next iconfont icon-toright">下一篇</span><strong><a href='/itzs/50163.shtml' title='网页制作学习：彻底弄懂CSS盒子模式之四'>网页制作学习：彻底弄懂CSS盒子模式之四</a> </strong> </p> </div> <div class="related-art sb br mb"> <p class="c-title"><span class="name">相关文章</span></p> <ul class="ul clearfix"> <article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/23715.shtml" title="用Access 2000进行班级管理" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="/a/images/defaultpic.gif" alt="用Access 2000进行班级管理"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/23715.shtml" title="用Access 2000进行班级管理" target='_blank'>用Access 2000进行班级管理</a></h2> <p class="intro hidden-sm">... <a href="/itzs/23715.shtml" title="用Access 2000进行班级管理" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>07-15</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/280501.shtml" title="鱼尾纹怎么办(眼睛鱼尾纹怎么去掉)" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="http://file.wbgxw.com/UpLoad/20220805/1639397469e4d58f.jpg" alt="鱼尾纹怎么办(眼睛鱼尾纹怎么去掉)"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/280501.shtml" title="鱼尾纹怎么办(眼睛鱼尾纹怎么去掉)" target='_blank'>鱼尾纹怎么办(眼睛鱼尾纹怎么去掉)</a></h2> <p class="intro hidden-sm">... <a href="/itzs/280501.shtml" title="鱼尾纹怎么办(眼睛鱼尾纹怎么去掉)" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>08-05</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/20223.shtml" title="我是如何从玩Photoshop变成老板的" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="/managementhttp://file.wbgxw.com/UpLoadfiles_8896/200804/20080410082626828.jpg" alt="我是如何从玩Photoshop变成老板的"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/20223.shtml" title="我是如何从玩Photoshop变成老板的" target='_blank'>我是如何从玩Photoshop变成老板的</a></h2> <p class="intro hidden-sm">... <a href="/itzs/20223.shtml" title="我是如何从玩Photoshop变成老板的" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>07-15</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/282228.shtml" title="电源功率不够会怎么样(主机电源瓦数不够会怎么样)" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="http://file.wbgxw.com/UpLoad/20220805/1639806948di9fpr.jpg" alt="电源功率不够会怎么样(主机电源瓦数不够会怎么样)"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/282228.shtml" title="电源功率不够会怎么样(主机电源瓦数不够会怎么样)" target='_blank'>电源功率不够会怎么样(主机电源瓦数不够会怎么样)</a></h2> <p class="intro hidden-sm">... <a href="/itzs/282228.shtml" title="电源功率不够会怎么样(主机电源瓦数不够会怎么样)" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>08-05</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/40878.shtml" title="关于在DataGrid里添加ComboBox（一）" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="/a/images/defaultpic.gif" alt="关于在DataGrid里添加ComboBox（一）"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/40878.shtml" title="关于在DataGrid里添加ComboBox（一）" target='_blank'>关于在DataGrid里添加ComboBox（一）</a></h2> <p class="intro hidden-sm">... <a href="/itzs/40878.shtml" title="关于在DataGrid里添加ComboBox（一）" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>07-15</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/29328.shtml" title="关于finalize()方法的解释。" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="/a/images/defaultpic.gif" alt="关于finalize()方法的解释。"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/29328.shtml" title="关于finalize()方法的解释。" target='_blank'>关于finalize()方法的解释。</a></h2> <p class="intro hidden-sm">... <a href="/itzs/29328.shtml" title="关于finalize()方法的解释。" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>07-15</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/282225.shtml" title="信泰保险怎么样(信泰保险存5年每年一万)" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="http://file.wbgxw.com/UpLoad/20220805/1639806188ogxnq7.jpg" alt="信泰保险怎么样(信泰保险存5年每年一万)"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/282225.shtml" title="信泰保险怎么样(信泰保险存5年每年一万)" target='_blank'>信泰保险怎么样(信泰保险存5年每年一万)</a></h2> <p class="intro hidden-sm">... <a href="/itzs/282225.shtml" title="信泰保险怎么样(信泰保险存5年每年一万)" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>08-05</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/280598.shtml" title="网贷逾期一年了怎么办(欠阳光贷款逾期一年了)" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="/a/images/defaultpic.gif" alt="网贷逾期一年了怎么办(欠阳光贷款逾期一年了)"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/280598.shtml" title="网贷逾期一年了怎么办(欠阳光贷款逾期一年了)" target='_blank'>网贷逾期一年了怎么办(欠阳光贷款逾期一年了)</a></h2> <p class="intro hidden-sm">... <a href="/itzs/280598.shtml" title="网贷逾期一年了怎么办(欠阳光贷款逾期一年了)" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>08-05</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/18497.shtml" title="关于淘宝客推广的几个方法" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="/a/images/defaultpic.gif" alt="关于淘宝客推广的几个方法"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/18497.shtml" title="关于淘宝客推广的几个方法" target='_blank'>关于淘宝客推广的几个方法</a></h2> <p class="intro hidden-sm">... <a href="/itzs/18497.shtml" title="关于淘宝客推广的几个方法" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>07-15</time> </p> </div> </article><article class="article-list sb clearfix"> <figure class="figure fl br"> <a class="thumbnail" href="/itzs/278588.shtml" title="地暖用什么地板(铺地暖用什么地板)" target='_blank'> <img class="img-cover br lazyload" src="/a/images/defaultpic.gif" data-original="http://file.wbgxw.com/UpLoad/20220805/16371198392dxyun.jpg" alt="地暖用什么地板(铺地暖用什么地板)"> </a> </figure> <div class="content"> <h2 class="title ellipsis m-multi-ellipsis"><a href="/itzs/278588.shtml" title="地暖用什么地板(铺地暖用什么地板)" target='_blank'>地暖用什么地板(铺地暖用什么地板)</a></h2> <p class="intro hidden-sm">... <a href="/itzs/278588.shtml" title="地暖用什么地板(铺地暖用什么地板)" target='_blank'>详细>></a></p> <p class="data clearfix"> <a class="cate fl br" href="./" target="_blank"><i class="iconfont icon-cate"></i>IT知识</a> <time class="time fl font-oswald" > <i class="iconfont icon-time"></i>08-05</time> </p> </div> </article> </ul> </div> </div> <aside id="sidebar" class="hidden-sm-md-lg fr"> <div class="theiaStickySidebar"> <section id="aside_new" class="widget widget_aside_new sb br mb"> <p class="c-title mb"><span class="name">热门文章</span></p> <ul class="widget-content aside_new"> <li class="list clearfix"><a href="/jycs/134440.shtml" title="1953年7月27日《朝鲜停战协定》在板门店签订" target='_blank'><span class="img-wrap br"><img src="http://file.wbgxw.com/UpLoad\20100713\re_201007131905528935.jpg" alt="1953年7月27日《朝鲜停战协定》在板门店签订" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">1953年7月27日《朝鲜停战协定》在板门店签订</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">07-17</span></span><span class="view"><i class="iconfont icon-cate"></i><span class="font-oswald">经验常识 </span></span></div> </div> </a></li><li class="list clearfix"><a href="/itzs/45097.shtml" title="Asp中代码与页面的分离" target='_blank'><span class="img-wrap br"><img src="/a/images/defaultpic.gif" alt="Asp中代码与页面的分离" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">Asp中代码与页面的分离</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">07-15</span></span><span class="view"><i class="iconfont icon-cate"></i><span class="font-oswald">IT知识 </span></span></div> </div> </a></li><li class="list clearfix"><a href="/jksh/205837.shtml" title="滋补药材（10大滋补中药材，你吃过哪些）" target='_blank'><span class="img-wrap br"><img src="http://file.wbgxw.com/UpLoad/20220805/zip_1618129029ecbf3n.jpg" alt="滋补药材（10大滋补中药材，你吃过哪些）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">滋补药材（10大滋补中药材，你吃过哪些）</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">08-05</span></span><span class="view"><i class="iconfont icon-cate"></i><span class="font-oswald">健康生活 </span></span></div> </div> </a></li><li class="list clearfix"><a href="/yyzt/324187.shtml" title="购买火车票需要身份证吗（火车站只有身份证号能买票吗）" target='_blank'><span class="img-wrap br"><img src="http://file.wbgxw.com/UpLoad/20220805/1624962766ftcpyy.jpg" alt="购买火车票需要身份证吗（火车站只有身份证号能买票吗）" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">购买火车票需要身份证吗（火车站只有身份证号能买票吗）</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">08-05</span></span><span class="view"><i class="iconfont icon-cate"></i><span class="font-oswald">影音杂谈 </span></span></div> </div> </a></li><li class="list clearfix"><a href="/yyzt/151790.shtml" title="魔域怎么玩(魔域现在主要玩什么)" target='_blank'><span class="img-wrap br"><img src="http://file.wbgxw.com/UpLoad\20220723\re_202207231440154215.jpg" alt="魔域怎么玩(魔域现在主要玩什么)" class="img-cover br random-img"></span> <div class="new-text"> <p class="title">魔域怎么玩(魔域现在主要玩什么)</p> <div class="info"><span class="time"><i class="iconfont icon-time"></i><span class="font-oswald">07-23</span></span><span class="view"><i class="iconfont icon-cate"></i><span class="font-oswald">影音杂谈 </span></span></div> </div> </a></li> </ul> </section> <section id="divTags" class="widget widget_tags sb br mb"> <p class="c-title mb"><span class="name">随机推荐</span></p> <ul class="widget-content divTags"> <li><a href="/tstx/240283.shtml" title="手机买火车票（怎样用手机买火车票）" target='_blank'>手机买火车票（怎样用手机买火车票）</a></li><li><a href="/yyzt/331338.shtml" title="柜子多少钱(装壁柜需要多少钱)" target='_blank'>柜子多少钱(装壁柜需要多少钱)</a></li><li><a href="/cylc/347758.shtml" title="北极熊为什么不吃企鹅(你今天怎么不吃企鹅)" target='_blank'>北极熊为什么不吃企鹅(你今天怎么不吃企鹅)</a></li><li><a href="/jycs/266742.shtml" title="怎样祛除脸上的雀斑（怎样去除雀斑）" target='_blank'>怎样祛除脸上的雀斑（怎样去除雀斑）</a></li><li><a href="/cylc/101793.shtml" title="中国传媒投资峰会今天举行" target='_blank'>中国传媒投资峰会今天举行</a></li><li><a href="/tstx/249438.shtml" title="ie 未响应（IE浏览器打开网页显示未响应的解决办法）" target='_blank'>ie 未响应（IE浏览器打开网页显示未响应的解决办法）</a></li><li><a href="/cylc/86634.shtml" title="如何与不会笑的老板相处" target='_blank'>如何与不会笑的老板相处</a></li><li><a href="/itzs/293178.shtml" title="痛风的原因有哪些(女性痛风的前兆)" target='_blank'>痛风的原因有哪些(女性痛风的前兆)</a></li><li><a href="/jksh/60144.shtml" title="家长要为孩子承担过失" target='_blank'>家长要为孩子承担过失</a></li><li><a href="/jksh/51973.shtml" title="男人硬起来才是真理" target='_blank'>男人硬起来才是真理</a></li><li><a href="/yyzt/333320.shtml" title="摩托罗拉哪款机子最好(摩托罗拉手机老款图片)" target='_blank'>摩托罗拉哪款机子最好(摩托罗拉手机老款图片)</a></li><li><a href="/jycs/11227.shtml" title="中国十大消费电子领先品牌" target='_blank'>中国十大消费电子领先品牌</a></li><li><a href="/tstx/246296.shtml" title="电脑关不了机怎么办（电脑关不了机）" target='_blank'>电脑关不了机怎么办（电脑关不了机）</a></li><li><a href="/cylc/100598.shtml" title="2004年IT、消费、医疗三大行业跳槽更难" target='_blank'>2004年IT、消费、医疗三大行业跳槽更难</a></li><li><a href="/yyzt/151970.shtml" title="冬季进补还是夏季进补(为什么说冬季进补最好)" target='_blank'>冬季进补还是夏季进补(为什么说冬季进补最好)</a></li><li><a href="/jycs/115045.shtml" title="5月4日生日书" target='_blank'>5月4日生日书</a></li><li><a href="/jycs/13705.shtml" title="百家姓之“皮姓”" target='_blank'>百家姓之“皮姓”</a></li><li><a href="/cylc/70401.shtml" title="另类生意经" target='_blank'>另类生意经</a></li><li><a href="/jksh/164220.shtml" title="沙排基本规则(沙滩排球规则)" target='_blank'>沙排基本规则(沙滩排球规则)</a></li><li><a href="/cylc/87857.shtml" title="危机管理中CEO的两项工作" target='_blank'>危机管理中CEO的两项工作</a></li><li><a href="/tstx/17019.shtml" title="《好男人难找女朋友的原因》" target='_blank'>《好男人难找女朋友的原因》</a></li><li><a href="/tstx/16876.shtml" title="《下班之后将压力隔离》" target='_blank'>《下班之后将压力隔离》</a></li><li><a href="/cylc/70485.shtml" title="创业，悬崖上的美丽舞蹈" target='_blank'>创业，悬崖上的美丽舞蹈</a></li><li><a href="/itzs/29691.shtml" title="C# 语言规范--1.6 语句" target='_blank'>C# 语言规范--1.6 语句</a></li><li><a href="/jycs/131881.shtml" title="1992年4月5日秘鲁政局发生强烈动荡" target='_blank'>1992年4月5日秘鲁政局发生强烈动荡</a></li><li><a href="/jycs/139201.shtml" title="1984年10月3日艾希莉·辛普森，美国流行摇滚歌手、歌曲创作人及女演员。" target='_blank'>1984年10月3日艾希莉·辛普森，美国流行摇滚歌手、歌曲创作人及女演员。</a></li><li><a href="/jycs/121393.shtml" title="糟熘鱼片-鲁菜糟熘鱼片的制作材料：糟熘鱼片的做法：" target='_blank'>糟熘鱼片-鲁菜糟熘鱼片的制作材料：糟熘鱼片的做法：</a></li><li><a href="/jksh/161283.shtml" title="怎么能让胸变挺（男女通用的居家练胸动作！）" target='_blank'>怎么能让胸变挺（男女通用的居家练胸动作！）</a></li><li><a href="/yyzt/327590.shtml" title="一公顷等于多少平米（计量单位大全表）" target='_blank'>一公顷等于多少平米（计量单位大全表）</a></li><li><a href="/jksh/53505.shtml" title="补钙，看看你补的正确吗？" target='_blank'>补钙，看看你补的正确吗？</a></li> </ul> </section> </div> </aside></div><script type="text/javascript">if($(".art-content").length>0){ $(".art-content img").each(function () { $(this).attr("data-original",$(this).attr("src")); $(this).attr("onclick","window.open($(this).attr('src'),'_blank','','true');"); $(this).css('cursor','pointer'); $(this).attr("title", "点击放大查看源图"); $(this).attr("src", "/a/images/imgloadimgload.gif"); $(this).lazyload(); });}</script><footer class="footer"> <div class="flink container sb mb"> <ul id="flink" class="f-list clearfix"> <li class="title">友情链接：</li> <li><a href='http://www.cssqt.com/' target='_blank'>长沙社区通</a></li> </ul> </div> <div class="main container"> <div class="f-about"> <small>80酷酷网是一个集80后网上创业娱乐学习的网站力争打造国内80后网上创业娱乐第一品牌</small> </div> <div class="f-diy"><small></small></div> <div class="clear"></div> </div> <div id="toolbar" class="toolbar "> <div id="totop" class="btn hidden"> <i class="iconfont icon-totop"></i> </div> </div></footer><div id="mask-hidden" class="mask-hidden transition"></div><script type="text/javascript" src="/a/images/common.js"></script> <script type="text/javascript" src="/a/images/js.js" ></script> <div class='pyqcenter' id="pyqcenter" style='display:none'> <p style='text-align:center;padding-top:10px;font-weight:bold;color:#fff;font-size:18px'>微信扫一扫分享朋友圈 <span style='color:red;cursor:pointer' onclick='document.getElementById("pyqcenter").style.display = "none";'>关闭</span></p> <p id='qrcodepyq' style='width:300px; height:300px; margin:15px;'></p></div><div id="mcover0" onClick="document.getElementById('mcover0').style.display='none';" style='display:none'><img src="/a/images/tishi.png"></div><div id="mcover1" onClick="document.getElementById('mcover1').style.display='none';" style='display:none'><img src='/a/images/guidewxf.png' id="mcover1_img"> </div><div id="mcover2" onClick="document.getElementById('mcover2').style.display='none';" style='display:none'><img src="/a/images/wxPng.png"></div><div id="mcover3" onClick="document.getElementById('mcover3').style.display='none';" style='display:none'> <img src='/a/images/guidewxf-2.png' id="mcover3_img"></div><span style='display:none'>点击：<script src='/a/Hids.ashx?ColumnID=6&ID=50162'></script></span><script type="text/javascript">qrcodepyq(utf16to8(httpweburl));getds(IsHandpick);</script><script type="text/javascript">$(function(){$("img.lazyload").lazyload();});</script></body></html>