化龙巷论坛二级导航美化

a0575a · 发表于 2012-3-27 16:14:51

修改方法：风格目录中的 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/ 中完成

abcnic · 发表于 2012-3-27 16:56:48

技术帖沙发支持

ryhbgs · 发表于 2012-3-28 14:21:15

谢谢分享，有空来试试

传奇英雄 · 发表于 2012-4-3 23:09:05

没看明白美化的什么！

amo123 · 发表于 2012-4-3 23:38:19

貌似不错。。

2878czt · 发表于 2012-4-4 00:09:28

技术贴。。支持下。

麦兜响叮当 · 发表于 2012-4-23 15:59:07

貌似不行啊！{:soso_e126:}

693344080 · 发表于 2012-5-4 19:37:00

我的成功了怎么没人支持呢

jiangnancun · 发表于 2012-5-30 19:32:26

我安装成功了，但是导航怎么跑到搜索栏下方去了呢？请问怎么修改啊？

第五者 · 发表于 2012-7-21 21:33:09

表示学习中!

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

[素材] 化龙巷论坛二级导航美化

本帖子中包含更多资源

本帖子中包含更多资源