[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 ***** [i=s] 本帖最後由 deep1117 於 2014-3-14 09:56 編輯 [/i]
來看看
順便學習
謝謝分享!
不過原本的導航列我就很喜歡囉 前排支持Y大 感謝你今次的分享! 謝謝分享 **** 該帖被屏蔽 **** 前排支持Y大 很详细 谢谢无私的分享~! 很详细 谢谢无私的分享~! 感謝你今次的分享 感谢分享~~~~~~~~~~~~~· 前排支持Y大 教學文~必支持~辛苦了 感謝分享 感谢你 无私的分享 谢谢 正好做导航栏 看一看。。。。 感谢分享试试看 順便學習
謝謝分享!
不過原本的導航列我就很喜歡囉 QAQ谁能告诉我森马是全面解析图