免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

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

本帖最後由 Yenifer 於 2014-3-14 08:42 編輯

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

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

现在我已这个网站的导航栏为例: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>
複製代碼
效果预览图:
[EC6R]GL%XM`G7G0O[QK.jpg
本帖隱藏的內容需要回復才可以瀏覽
4

評分人數

返回列表