SCLUB免費論壇申請-使用者論壇 - Powered by Discuz! Board

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

新浪微博

QQ空间

Facebook

Google+

Plurk

Twitter

Line

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

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

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

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

首先我们打开论坛后台进入界面→风格管理→选择一个风格点击编辑→切换到高级编辑找到菜单这项（如下图）
]LZKI)%MV3~EX33P{65YPXO.jpg

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

现在我已这个网站的导航栏为例：http://www.qunchong.com/
导航栏的背景图片地址是：

选中后的背景图片是：

字体颜色是：#fff
选中后的字体颜色是：#0063A7

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

#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”

#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，代码如下

#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([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;}

複製代碼

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

<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>

複製代碼

效果预览图：

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

圖片附件: ]LZKI)%MV3~EX33P{65YPXO.jpg (2014-3-14 08:16, 203.39 KB) / 下載次數 4366
http://orzweb.net/discuz/attachment.php?aid=28871&k=7f790d858f2e1695637d176aeb1a06e7&t=1732309486&sid=54uHo5

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

作者: 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://orzweb.net/discuz/)