首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >怎么修改锦鲤主题导航栏的颜色背景

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

作者头像
李洋博客
发布2021-06-15 11:21:05
发布2021-06-15 11:21:05
1.7K00
代码可运行
举报
文章被收录于专栏:李洋博客李洋博客
运行总次数:0
代码可运行

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

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

代码语言:javascript
代码运行次数:0
运行
复制
#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屏蔽这个功能一点意义都没有,不为什么还有那么多人喜欢这个,咱也不敢问,咱也不敢说啊),进去开发者模式,找到你想修改的栏目,如图:

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

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

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-08-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档