本文作者:李洋博客

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

李洋博客 2周前 ( 08-08 13:47 ) 400 2条评论
怎么修改锦鲤主题导航栏的颜色背景摘要: 其实一直有人问,怎么修改导航栏的黑色背景,因为这个涉及div框架和class样式表,不是一段代码就能搞定的,今天有时间就把教程整理以下,当然不是一步一步教,因为我并不适合做老师,我...

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

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

首页,导航栏被分成了两个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屏蔽这个功能一点意义都没有,不为什么还有那么多人喜欢这个,咱也不敢问,咱也不敢说啊),进去开发者模式,找到你想修改的栏目,如图:image.png

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

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

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

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

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

文章版权及转载声明:

作者:李洋博客本文地址:https://www.talklee.com/blog/425.html发布于 2周前 ( 08-08 13:47 )
文章转载或复制请以超链接形式并注明出处李洋个人博客

分享到:
赞(3

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

发表评论

快捷回复:

评论列表 (有 2 条评论,400人围观)参与讨论
网友昵称:头条新闻
头条新闻 游客2019-08-10沙发 回复 Google Chrome 63.0.3239.132 Windows 7
文章不错非常喜欢
网友昵称:李洋博客
李洋博客 博主2019-08-12 回复 Sogou Explorer Windows 10 x64
@头条新闻 谢谢支持