请选择 进入手机版 | 继续访问电脑版

有图站长

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

有图站长 烟台 网站建设 Zblog 查看内容

Zblog导航栏修改方法大全

2015-3-17 16:04| 发布者: ytzz| 查看: 1671| 评论: 0

摘要: 在用Zblog做博客时,我们经常需要对导航栏进行更改,如添加新栏目、更改其背景颜色、字体颜色等,新手挨个试验代码的话会比较麻烦,而且浪费时间。下面,我将Zblog导航修改的相关内容整理出来,便于大家对导航栏做个 ...

在用Zblog做博客时,我们经常需要对导航栏进行更改,如添加新栏目、更改其背景颜色、字体颜色等,新手挨个试验代码的话会比较麻烦,而且浪费时间。下面,我将Zblog导航修改的相关内容整理出来,便于大家对导航栏做个性化设置。

如果你想在导航栏里添加一个栏目的话(如上图中的“测试链接”),则相对比较简单,只需要进入网站后台,在网站设置-模块管理-导航栏菜单的底部添加栏目名和链接就可以了,这里主要说下怎么对导航栏本身进行个性化设置。对导航栏的设置需要修改位于zb_users/THEME/“你的模板对应的文件夹”/STYLE这个文件夹里的CSS文件。修改方法如下:

1.导航栏高度设置:在刚才的CSS文件里找到#divNavBa{ float:right;width:100%;height:36px;

 color:#fff;}修改height后面的数值。

2.导航栏间距修改:在刚才的CSS文件里找到#divNavBar a{ float:left;margin:Xpx Xpx Xpx Xpx;

padding:Xpx Xpx Xpx Xpx;text-decoration: none;line-height:22px;}修改其中margin和padding对应的数值,他们后面的四个值分别对应的是上、右、下、坐间距,具体用法可以百度下。(X是数值)。

3.导航字体加粗:在上面第二条的地方添加font-weight:bold;可直接添加在最后的大括号之前就行

4.导航背景颜色、字体颜色:在刚才的CSS文件里找到

#divNavBar a.on{

color: white;

background:#3399CC;

}这句,color指的是当前访问的栏目的导航字体的颜色,background指的是当前访问的导航背景颜色。

5.导航上链接颜色:在刚才的CSS文件里找到

 #divNavBar a:link {

 color: white;

 }这句,直接修改color后的颜色即可。

 6.已访问导航栏字体颜色:在刚才的CSS文件里找到

#divNavBar a:visited {

 color: white;

 }这句,直接修改color后的颜色即可。

7.鼠标悬停时导航栏字体和背景颜色。在刚才的文件里找到

#divNavBar a:hover {

 color:white;

 background: #226bb8;

 }这句,修改方法同地4条一样。

 注意:修改了之后颜色不变的话,多半是因为你访问过你自己博客的所有导航栏目,导致其按你设置的已访问导航栏字体颜色显示。

 这4条分别对应的是当前访问的栏目的字体颜色及背景颜色、导航字体颜色、访问过的栏目的字体颜色、鼠标悬停时的字体颜色和背景颜色,直接修改color和background的值即可。



鲜花

握手
1

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关分类

QQ|Archiver|手机版|小黑屋|有图青年站长社区 ( 鲁ICP备14014356号

GMT+8, 2018-11-19 15:02 , Processed in 0.058487 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部