怎么修改锦鲤主题导航栏的颜色背景

talklee

温馨提示:这篇文章已超过1684天没有更新,请注意相关的内容是否还可用!

其实一直有人问,怎么修改导航栏的黑色背景,因为这个涉及div框架和class样式表,不是一段代码就能搞定的,今天有时间就把教程整理以下,当然不是一步一步教,因为我并不适合做老师,我只是把成品拿出来,然后把对应的颜色空余出来,至于要什么颜色,自己添加就行了。

怎么修改锦鲤主题导航栏的颜色背景 第1张

首页,导航栏被分成了两个DIV,一个是顶端悬浮(黑色)一个是跟随悬浮(白色+透明)

#header{
  background: rgba(255,255,255,0.9);
}
.header-nav li a{
  color: #333;
}
.search_top a{
  font-size: 1.5em;
  color: #333;
}
a.nav-userlogin{
    color: #333;
}
span.nav-more{
    border-top-color: #333;
}

代码可以直接放在锦鲤主题的自定义css里面,保存之后前台刷新,就变成了白色背景,有一点点透明效果,其中第一段:“#header”是div框架的ID值,我们采用rgba的颜色代码,因为这个这个设置一个小小透明效果,如果不需要透明可以设成“#fff”全白背景,下面的两个文本超链接,原样式是黑色,所以字体都是白色,修改之后背景是白色,那么就得在修改以下字体颜色,这么设置的是黑色,如果想修改的话把“#333”修改为别的颜色代码即可。

最后简单说下怎么找样式ID值,首页打开网站F12(有些网站屏蔽了F12功能,就先随便找一个可以用f12的网站,然后把网址换成被屏蔽的网址,就行了,所以我认为加一段JS屏蔽这个功能一点意义都没有,不为什么还有那么多人喜欢这个,咱也不敢问,咱也不敢说啊),进去开发者模式,找到你想修改的栏目,如图:怎么修改锦鲤主题导航栏的颜色背景 第2张

“0”代表需要修改的模块,

“1”该模块的ID值(有些不是id,如图可能是“class”),

“2”是该模块的css样式,

“3”是本地修改之后的效果。如果满意的话复制“2”的值“#header{}”然后把自己修改之后的复制进去“#header{background: rgba(255,255,255,0.9);}”然后把这段代码放在自定义css接口里面就可以了,即使下次更新主题也不会受影响。

好了,就说这么多,不知道你们反正我是模糊了,看不懂的也不要问我了,希望你们都你能能理解,实在看不懂直接复制代码就行了,另外一种导航跟随效果不用管,因为它就是白色的,所以这里就不写了,动手能力强且看懂教程的可以自己实验研究下。

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (有 2 条评论,8420人围观)
网友昵称:头条新闻
头条新闻 V 游客 Google Chrome 63.0.3239.132 Windows 7 沙发
2019-08-10 来自广东 回复
文章不错非常喜欢
网友昵称:talklee
talklee V 博主 Sogou Explorer Windows 10 x64
2019-08-12 来自天津 回复
@头条新闻 谢谢支持

目录[+]