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

popuppp · 发表于 2012-3-5 21:48:54

本帖最后由 popuppp 于 2014-6-30 20:45 编辑

网址演示：驻马店论坛 http://bbs.zmd5.com/
图片演示：
修改方法：风格目录中的 header.htm common.css
打开 /template/default/common/header.htm
搜索：<div id="wp" class="wp">在这个代码下面加入：

<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/ 中完成

64243354 · 发表于 2012-3-5 21:50:28

來來來我抢sf!! 给我发橫排美化

sd5209101 · 发表于 2012-3-5 22:19:09

提示: 作者被禁止或删除内容自动屏蔽

12655611 · 发表于 2012-3-5 22:23:24

这个风格好！等升级了就用、先留个记号！

沈阳晚风 · 发表于 2012-3-5 22:37:16

liqu12511 · 发表于 2012-3-5 23:40:11

楼主可以发下化龙巷的顶部导航吗

发表于 2012-3-6 00:29:00

转播微博[tthread=ruihuawang, 瑞华网]http://app.qlogo.cn/mbloghead/cb5a7253b99dc25e98f2[/tthread]

秦龙 · 发表于 2012-3-6 00:48:33

tomweb · 发表于 2012-3-6 00:58:10

谢谢楼主

		自动登录	找回密码
密码			立即注册

[发布] 【免费X2/3美化系列】精品二级导航美化，防自化龙巷论坛

本帖子中包含更多资源

评分

评分

本帖子中包含更多资源