关于我们HTML模板代码,可实现当前栏目高亮显示
关于我们HTML模板代码,可实现当前栏目高亮显示,效果如下图所示:
样式
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/* 消除移动浏览器点击蓝色背景 */} body { margin: 0;text-align:left;font-size: 12px;padding:0; background:#eaeaea; font-family:arial,"Microsoft YaHei","\5fae\8f6f\96c5\9ed1";} article,aside,details, /* 1 */figcaption,figure,footer,header,main, /* 2 */menu,nav,section,summary { /* 1 */ display: block;} a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */} a:active,a:hover { outline-width: 0;} h1 { font-size: 2em; margin: 0.67em 0;} img { border-style: none;} .clearfix { *zoom:1} .clearfix:before,.clearfix:after { display:table; line-height:0; content:""} .clearfix:after { clear:both} p{margin: 0;} img { width:auto\9; height:auto; max-width:100%; vertical-align:middle; border:0; -ms-interpolation-mode:bicubic} ul,ol,dl,h1,h2,h3,h4,h5,h6,dt,dd{margin:0;padding:0} ul li,ol li{list-style:none} .f-fl,.f-lifl li{float:left;display:inline} .f-fr{float:right;display:inline} a,a:visited{text-decoration:none;color:#2a2a2a;} em{ font-style:normal;} .g-box-1200{ width:1520px; height:auto; margin:auto; display:block; } /*内容部分*/ .g-tophe {position: relative;margin-top:15px; margin-bottom:15px; } .g-tophe .m-tabdiv{width: 180px;overflow: hidden; float: left;} .g-tophe .m-tabdiv .m-ul li span{display:inline-block;padding:0 5px} .g-tophe .m-tabdiv li{width: 180px;height: 60px;line-height: 60px;color: #333;text-align:center; font-size: 16px; overflow: hidden;font-family: "microsoft yahei";border-bottom:1px solid #eaeaea; } .g-tophe .m-tabdiv .m-ul li a{width: 180px;height: 60px;background-color: #fff; display: block;} .g-tophe .m-tabdiv .m-ul li a:hover{background-color:#FF6A6A; color:#fff; } .g-tophe .m-tabdiv li.m-li{} .g-tophe .m-tabdiv li.m-li a,.g-tophe .m-tabdiv li.m-li a:hover{color:#fff;background:#da2128} .g-tophe .m-tabdiv li.f-hover { width:180px;color:#da2128;background:#FF6A6A; } .g-tophe .m-tabdiv li.f-hover a{color:#da2128} .g-tophe .m-gywm{width:87%;min-height:645px;overflow:hidden} .g-tophe .m-gywm .m-new-cont{background:#fff} .g-tophe .m-gywm h3{line-height:80px;height:80px;font-size:24px;font-weight:bold;color:#20aef0;margin-left:20px;border-bottom:1px solid #eaeaea;margin:0 20px} .g-tophe .m-gywm .m-tdetail{padding:25px 20px;font-size:16px;font-family:arial,"Microsoft YaHei"} .g-tophe .m-gywm .m-tdetail p{line-height:30px;color:#555;text-indent:2em;padding:0 5px;font-size:14px} .dq {padding-top: 10px;color: dimgray;font-size: 1rem;} .dq a:link,a:visited{color: dimgray} /*友情链接*/ .g-tophe .m-link a{color:#000} .g-tophe .m-gywm h3{line-height:80px;height:80px;font-size:24px;font-weight:bold;color:#20aef0;margin-left:20px;border-bottom:1px solid #eaeaea;margin:0 20px} /*地图*/ .g-tophe .m-gywm .m-new-cont #about_text { margin: 20px; font-size: 14px; line-height: 25px; text-align: left;padding-bottom:20px; } .g-tophe .m-gywm .m-new-cont #about_text a img{ border-top-style: none; border-bottom-style: none; border-left-style: none; vertical-align:bottom } .g-tophe .m-gywm .m-new-cont #about_text p { padding-top: 20px; text-indent: 50px; } .g-tophe .m-gywm .m-new-cont #about_text h2 { font-size: 14px; color: #F60; text-align: left; margin: 0px; padding:10px 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; clear: both; color:#555;} .g-tophe .m-gywm .m-new-cont #about_text h2 a{color:#555;} .g-tophe .m-gywm .m-new-cont #about_text ul li { list-style-type: none; line-height: 25px; float: left; width: 140px; height: 30px; margin: 5px; text-align: center; } .g-tophe .m-gywm .m-new-cont #about_text ul li a { text-decoration: underline; color:#555; } .g-tophe .m-gywm .m-new-cont #about_text ul li a:hover {color:#f40;} .g-tophe .m-gywm .m-new-cont #about_text ul { margin: 0px; padding: 0px; } .g-tophe .m-gywm .m-new-cont #about_text ul.about_link_ul2 li{ height:25px;line-height:25px;width:auto ;color:#555;display:block;zoom:1;float:none;text-align:left}
HTML代码:
<div class="g-box-1200 g-tophe f-hovertab-box clearfix"> <div class="m-tabdiv "> <ul class="f-hovertab-btn m-ul"> <li class='m-li'><a href='/plus/list.php?tid=7'>公司简介</a></li> <li><a href='/plus/list.php?tid=8'>业务范围<span>></span></a></li> <li><a href='/plus/list.php?tid=9'>组织架构<span>></span></a></li> <li><a href='/plus/list.php?tid=10'>精英团队<span>></span></a></li> <li><a href='/plus/list.php?tid=11'>服务客户<span>></span></a></li> <li><a href='/plus/list.php?tid=32'>联系我们<span>></span></a></li> <li><a href='/plus/list.php?tid=36'>资质证书<span>></span></a></li> </ul> </div> <div class="m-copyright m-gywm f-fr"> <div class="m-new-cont"> <h3>公司简介</h3> <div class="m-tdetail"> <p> <span style="font-size:16px;"> </span></p> <p> <span style="font-size:16px;"> 集团,成立十余年,以文化创意和文化旅游两大产业体系为支点,业务涵盖电视传媒包装、城市整合营销策划、城市规划、展览展示、城市形象包装推广及公关节庆活动、商业及公益广告、数字科技等领域。</span></p> <div class="clear"> </div> </div> </div> </div> </div>
如果用于织梦DEDECMS调用,代码如下 ,可实现当前栏目高亮。
<div class="g-box-1200 g-tophe f-hovertab-box clearfix"> <div class="m-tabdiv "> <ul class="f-hovertab-btn m-ul"> {dede:channel currentstyle="<li class='m-li'><a href='~typelink~'>~typename~</a></li>"} <li><a href='[field:typelink/]'>[field:typename/]<span>></span></a></li> {/dede:channel} </ul> </div> <div class="m-copyright m-gywm f-fr"> <div class="m-new-cont"> <h3>{dede:field.seotitle /}</h3> <div class="m-tdetail"> {dede:field.content/} <div class="clear"> </div> </div> </div> </div> </div>
声明:
1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,内容难免有纰漏,一切内容仅供参考。
2.本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!
3.本站所有原创作品,包括文字、资料、图片、网页格式,转载时请标注作者与来源。
1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,内容难免有纰漏,一切内容仅供参考。
2.本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!
3.本站所有原创作品,包括文字、资料、图片、网页格式,转载时请标注作者与来源。
THE END

0

打赏

分享

二维码

海报
分享
二维码
打赏
分享海报