[新手教程] [Y。整理]菜鸟基地之用CSS做出喜欢的导航栏（第一期）

Yenifer

第一次做这种教学，没啥经验，有些错的地方请大神别喷我，那些某某粉丝喷子也别喷我。

首先我们打开论坛后台进入界面→风格管理→选择一个风格点击编辑→切换到高级编辑找到菜单这项（如下图）

下載 (203.39 KB)

2014-3-14 08:16

按照图上说的，把你的菜单样式也改成图上面的（也可以用代码隐藏，但是太麻烦了）

现在我已这个网站的导航栏为例：http://www.qunchong.com/
导航栏的背景图片地址是：
选中后的背景图片是：
字体颜色是：#fff
选中后的字体颜色是：#0063A7

现在我们开始做导航栏吧！
首先看过B大的全面解析图的应该都知道，导航栏的选择器是#menu，那么先给导航栏加背景图片，

1. #menu {background: url(http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/tb.png) no-repeat scroll 0px 0px !important;height: 33px !important;line-height: 33px !important;width: 100% !important;}

複製代碼

代码中的background是背景的意思
height是高度，
line-height是在现有的高度让某元素适中

然后就是用CSS做出字体的 效果，字体的选择器是“a”，那么就是导航栏的选择器+字体的选择器，就是“#menu a”

1. #menu a {color: #fff !important;padding: 0px 15px !important;height: 33px !important;line-height: 33px !important;font-weight: 700 !important;font-size: 14px !important;}

複製代碼

然后就是字体被选中的效果，选中的代码是.current，代码如下

1. #menu li.current a {color: #0063A7 !important;background: url(http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/tb_on.gif) repeat-x scroll center top #fff !important;}

複製代碼

再然后就是字体与字体中间的那个丨

1. #menu li {background: url([img]http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/nv_a.gif[/img]) no-repeat scroll 100% 0px !important;padding-right: 1px !important;float: left !important;padding-left: 0px !important;}

複製代碼

完成的代码如下(放在头部试试效果)：

1. <style>#menu {background: url(http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/tb.png) no-repeat scroll 0px 0px !important;height: 33px !important;line-height: 33px !important;width: 100% !important;}#menu a {color: #fff !important;padding: 0px 15px !important;height: 33px !important;line-height: 33px !important;font-weight: 700 !important;font-size: 14px !important;}#menu li.current a {color: #0063A7 !important;background: url(http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/tb_on.gif) repeat-x scroll center top #fff !important;}#menu li {background: url(http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/nv_a.gif) no-repeat scroll 100% 0px !important;padding-right: 1px !important;float: left !important;margin-left: 0px !important;}#mn_index {margin-left: 10px !important;}</style>

複製代碼

效果预览图：

下載 (75.47 KB)

2014-3-14 08:35

本帖隱藏的內容需要回復才可以瀏覽

deep1117

來看看
順便學習
謝謝分享！
不過原本的導航列我就很喜歡囉

qingchunwu

前排支持Y大

4rphotoclub

感謝你今次的分享!

superman1024

謝謝分享

sheshou8600

前排支持Y大

wlsekffo123

很详细 谢谢无私的分享~！

qky

很详细 谢谢无私的分享~！

geofishinghk

感謝你今次的分享