SCLUB免費論壇申請-使用者論壇's Archiver

Yenifer 發表於 2014-3-14 08:36

[Y。整理]菜鸟基地之用CSS做出喜欢的导航栏(第一期)

[i=s] 本帖最後由 Yenifer 於 2014-3-14 08:42 編輯 [/i]

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

首先我们打开论坛后台进入界面→风格管理→选择一个风格点击编辑→切换到高级编辑找到菜单这项(如下图)
[attach]28871[/attach]
按照图上说的,把你的菜单样式也改成图上面的(也可以用代码隐藏,但是太麻烦了)

现在我已这个网站的导航栏为例:[url]http://www.qunchong.com/[/url]
导航栏的背景图片地址是:[img]http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/tb.png[/img]
选中后的背景图片是:[img]http://www.qunchong.com/template/qunchong_02704x3/images/qunchong02704/tb_on.gif[/img]
字体颜色是:#fff
选中后的字体颜色是:#0063A7

现在我们开始做导航栏吧!
首先看过B大的全面解析图的应该都知道,导航栏的选择器是#menu,那么先给导航栏加背景图片,[code]#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;}[/code]代码中的background是背景的意思
height是高度,
line-height是在现有的高度让某元素适中

然后就是用CSS做出字体的 效果,字体的选择器是“a”,那么就是导航栏的选择器+字体的选择器,就是“#menu a”[code]#menu a {color: #fff !important;padding: 0px 15px !important;height: 33px !important;line-height: 33px !important;font-weight: 700 !important;font-size: 14px !important;}[/code]然后就是字体被选中的效果,选中的代码是.current,代码如下[code]#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;}[/code]再然后就是字体与字体中间的那个丨[code]#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;}[/code]完成的代码如下(放在头部试试效果):[code]<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>[/code]效果预览图:
[attach]28872[/attach]
**** Hidden Message *****

deep1117 發表於 2014-3-14 09:52

[i=s] 本帖最後由 deep1117 於 2014-3-14 09:56 編輯 [/i]

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

qingchunwu 發表於 2014-3-14 12:17

前排支持Y大

4rphotoclub 發表於 2014-3-14 13:43

感謝你今次的分享!

superman1024 發表於 2014-3-14 14:19

謝謝分享

zhu0753 發表於 2014-3-16 22:37

**** 該帖被屏蔽 ****

sheshou8600 發表於 2014-3-18 16:17

前排支持Y大

wlsekffo123 發表於 2014-3-26 16:19

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

qky 發表於 2014-3-27 17:03

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

geofishinghk 發表於 2014-4-16 23:33

感謝你今次的分享

情蕭 發表於 2014-4-17 08:18

感谢分享~~~~~~~~~~~~~·

lincas 發表於 2014-5-1 19:05

前排支持Y大

goodjob 發表於 2014-5-3 00:28

教學文~必支持~辛苦了

forever10006 發表於 2014-5-3 12:22

感謝分享

oHi丶薇薇o 發表於 2014-5-5 13:25

感谢你 无私的分享

ken678 發表於 2014-5-6 17:53

谢谢 正好做导航栏

左左柒曦 發表於 2014-9-13 15:45

看一看。。。。

wanru 發表於 2014-9-13 17:06

感谢分享试试看

shan 發表於 2014-10-3 12:59

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

hdwl3 發表於 2015-1-17 00:11

QAQ谁能告诉我森马是全面解析图

頁: [1] 2 3

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.