【免费X2.5美化系列】精品二级导航美化，防自化龙巷论坛

dly · 发表于 2012-3-7 09:35:17

图片演示：

修改方法：风格目录中的 header.htm common.css
打开 /template/default/common/header.htm
搜索：在这个代码下面加入：

<DIV class="bb365_newsubnav cl">
<DIV class=category>
<DIV class=category_left>
<P>互动</P></DIV>
<UL class=width100>
<LI class=h_icon><A href="forum-2-1.html">民生</A><IMG
class=new_icon src="static/image/common/hot.gif">
</LI>
<LI><A href="forum-37-1.html">灌水</A> </LI>
<LI><A href="forum-38-1.html">爱心</A> </LI>
<LI><A href="forum-66-1.html">交友</A> </LI></UL></DIV>
<DIV class=category>
<DIV class=category_left>
<P>生活</P></DIV>
<UL class=width150>
<LI><A href="forum-42-1.html">房产聚焦</A> </LI>
<LI><A href="forum-58-1.html">美食</A> </LI>
<LI><A href="forum-46-1.html">汽车</A> </LI>
<LI><A href="forum-43-1.html">家居建材</A> </LI>
<LI><A href="forum-44-1.html">婚嫁</A> </LI>
<LI><A href="forum-45-1.html">亲子</A> </LI></UL></DIV>
<DIV class=category>
<DIV class=category_left>
<P>爱好</P></DIV>
<UL class=width130>
<LI><A href="forum-55-1.html">数码潮流</A> </LI>
<LI><A href="forum-56-1.html">摄影</A> </LI>
<LI><A href="forum-57-1.html">宠物天地 </A> </LI>
<LI class=h_icon><A href="forum-59-1.html">运动</A><IMG
class=new_icon src="static/image/common/new.gif">
</LI></UL></DIV>
<DIV class=category>
<DIV class=category_left>
<P>互助</P></DIV>
<UL class=width120>
<LI class=h_icon><A href="forum-48-1.html">健康</A><IMG class=new_icon
src="static/image/common/new.gif"> </LI>
<LI><A href="forum-49-1.html">投资理财 </A> </LI>
<LI><A href="forum-51-1.html">电脑</A> </LI>
<LI><A href="forum-50-1.html">法在身边</A> </LI></UL></DIV>
<DIV class=category>
<DIV class=category_left>
<P>信息</P></DIV>
<UL class="width140 mr0">
<LI><A href="forum-64-1.html">淘宝推广</A> </LI>
<LI><A href="forum-40-1.html">招聘求职</A> </LI>
<LI><A href="forum-65-1.html">我要团购</A> </LI>
<LI><A href="forum-39-1.html">物尽其用</A>
</LI></UL></DIV></DIV>

复制代码

打开/template/default/common/common.css

搜索

.ie_all .imgzoom_exif, .imgzoom_exif_hover { background: #000; }
.ie6 .imgzoom_exif { bottom: 39px; }

复制代码

既在最下方添加

.bb365_newsubnav {
FONT-SIZE: 14px; PADDING-top: 5px; MARGIN: 0px auto; WIDTH: 960px
}
.category P {
FONT-WEIGHT: lighter; FONT-SIZE: 16px; MARGIN: 0px 0px 0px 12px; WIDTH: 16px; COLOR: #0058b0; FONT-FAMILY: "黑体"; POSITION: relative; TOP: 2px
}
.category_left {
BACKGROUND: url(static/image/common/bg_11.gif) no-repeat; FLOAT: left; WIDTH: 45px; HEIGHT: 52px
}
.category UL.mr0 {
MARGIN-RIGHT: 0px
}
.category UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(static/image/common/bg_12.gif) no-repeat right 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-RIGHT: 18px; PADDING-TOP: 3px; HEIGHT: 49px
}
.category UL.width100 {
WIDTH: 100px
}
.category UL.width120 {
WIDTH: 120px
}
.category UL.width140 {
WIDTH: 149px
}
.category UL.width130 {
WIDTH: 128px
}
.category UL.width150 {
WIDTH: 166px
}
.category UL LI {
PADDING-RIGHT: 4px; DISPLAY: inline; PADDING-LEFT: 7px; FONT-SIZE: 14px; FLOAT: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px
}
.category UL LI A {
COLOR: #666; TEXT-DECORATION: none
}
.category UL LI A:hover {
COLOR: #005eac; TEXT-DECORATION: none
}
.category UL LI.h_icon {
POSITION: relative
}
.category UL LI.h_icon A {
COLOR: #ff3300
}
.category UL LI IMG.new_icon {
POSITION: absolute; TOP: 4px
}
.category UL LI.reds A {
COLOR: #ff3300
}

复制代码

游客，如果您要查看本帖隐藏内容请回复

最后将附件中的图片上传至 static/image/common/ 中完成

zhen3071 · 发表于 2012-3-7 10:26:19

顶顶更健康

中国营销沙龙 · 发表于 2012-3-9 15:17:29

这个也很实用啊！

huabopc · 发表于 2012-3-25 11:46:33

看看适合我的站不

海韵睿杰 · 发表于 2012-11-11 05:30:54

强烈支持楼主ing……

花开相依 · 发表于 2012-11-11 12:07:39

看到这帖子真是高兴！

物联网络论坛 · 发表于 2012-11-16 00:16:59

学习，留着备用

[代码修改] 【免费X2.5美化系列】精品二级导航美化，防自化龙巷论坛

相关帖子