免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

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

作者: Yenifer    時間: 2014-3-14 08:36     標題: [Y。整理]菜鸟基地之用CSS做出喜欢的导航栏(第一期)

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

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

首先我们打开论坛后台进入界面→风格管理→选择一个风格点击编辑→切换到高级编辑找到菜单这项(如下图)
]LZKI)%MV3~EX33P{65YPXO.jpg
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>
複製代碼
效果预览图:
[EC6R]GL%XM`G7G0O[QK.jpg
2014-3-14 08:35

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


圖片附件: ]LZKI)%MV3~EX33P{65YPXO.jpg (2014-3-14 08:16, 203.39 KB) / 下載次數 2154
http://joinbbs.net/discuz/attachment.php?aid=28871&k=172a38ca847d502ef5b924e880fbd844&t=1711658168&sid=CjYyyr



圖片附件: [EC$126R]GL%XM`G7G0O[QK.jpg (2014-3-14 08:35, 75.47 KB) / 下載次數 2134
http://joinbbs.net/discuz/attachment.php?aid=28872&k=b2bb785b136b91ad196191850803b56f&t=1711658168&sid=CjYyyr


作者: deep1117    時間: 2014-3-14 09:52

本帖最後由 deep1117 於 2014-3-14 09:56 編輯

來看看
順便學習
謝謝分享!
不過原本的導航列我就很喜歡囉
作者: 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谁能告诉我森马是全面解析图
作者: 秋枫    時間: 2015-1-17 16:28

谢谢无私的分享~!
作者: 葱葱    時間: 2015-3-4 05:30

回復 1# Yenifer


   



來看看
順便學習
謝謝分享!
作者: IndianaJones    時間: 2015-7-14 00:15

学习~~~~~~~~~~~
作者: 繽紛色彩    時間: 2015-7-14 06:46

非常有用的分享
作者: Kajes    時間: 2015-7-27 00:51

來看看
順便學習
作者: azukki    時間: 2015-10-17 19:03

很棒的教學,特此來研究~~
作者: wwlo54205    時間: 2015-10-17 19:08

感謝分享~~
作者: azukki    時間: 2015-10-17 19:41

其實發現有個問題

菜單無法伸縮頁頭的間隔空間
作者: leisurema    時間: 2015-11-1 19:24

順便學習
謝謝分享!
作者: 郑爽中文网    時間: 2016-4-1 11:19

非常不错的教程
作者: mcxhcn    時間: 2016-4-4 17:56

這可是個好東西
作者: mcxhcn    時間: 2016-4-4 18:05

怎麼居中啊
作者: 965911983    時間: 2016-8-23 08:18

回復 1# Yenifer


    不错
作者: yuminbbs    時間: 2016-10-1 17:46

謝謝分享!
作者: Jungssica    時間: 2017-1-14 20:32

感谢楼主分享!
作者: 夏燃    時間: 2017-3-25 12:01

时隔已久找到了这个
谢谢~
作者: xpstone    時間: 2017-3-31 20:17

十分感谢
作者: 幻空    時間: 2017-4-7 17:37

感谢分享
作者: panjinsi1    時間: 2017-4-26 02:50

感谢分析
作者: skyyule    時間: 2017-5-30 11:06

謝謝分享
作者: 李奥    時間: 2018-6-24 04:42

这个导航不错
作者: macheng    時間: 2018-7-26 23:01

学习学习
作者: 99万家论坛    時間: 2019-7-1 00:44

來看看
順便學習
謝謝分享!
不過原本的導航列我就很喜歡囉
作者: hjmdhjm    時間: 2019-7-31 16:21

学习学习,谢谢分享
作者: 恒小杰    時間: 2019-8-16 23:32

感谢分享
作者: huaekin    時間: 2022-5-20 14:59

谢你今次的分享
作者: hudiednf    時間: 2023-5-28 13:30

很详细 谢谢无私的分享~!
作者: neo5353    時間: 2023-10-4 16:11

看看效果怎样




歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://joinbbs.net/discuz/) Powered by Discuz! 7.2