关于我们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;">&nbsp; &nbsp;&nbsp;</span></p>
<p>
	<span style="font-size:16px;">&nbsp; &nbsp; &nbsp; &nbsp; 集团，成立十余年，以文化创意和文化旅游两大产业体系为支点，业务涵盖电视传媒包装、城市整合营销策划、城市规划、展览展示、城市形象包装推广及公关节庆活动、商业及公益广告、数字科技等领域。</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>