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

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

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

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

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

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

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

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

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

文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为网站名称原创文章,转载或复制请以超链接形式并注明出处。https://xz.itlaoli.com/blog/425.html

« 上一篇
下一篇 »

相关推荐

Linux手动分区挂载10TB磁盘到 /www目录并安装宝塔面板到数据盘的完整教程

2025年10月16日

437阅读

记录Windows11系统暂停更新怎么延长周数的教程

2025年08月25日

2850阅读

Windows11失败,提示“ahsProtector-你的电脑上有服务尚未准备好用于此版本的Windows”的解决方案

2025年08月21日

3313阅读

zblogPHP李洋个人博客主题使用网址导航模板的图文教程

2025年05月27日

5606阅读

百度普通收录API提交后提示 {"error":400,"message":"site init fail"}问题怎么解决?

2025年03月03日

5067阅读

zblog应用中心后台无法更新主题模板及无法新建标签的解决办法

2025年02月24日

6608阅读

发表评论

访客 访客
评论列表 (有 2 条评论,10482人围观)
网友昵称:头条新闻
头条新闻 V 游客 Google Chrome 63.0.3239.132 Windows 7 沙发
2019年08月10日 来自广东 回复
文章不错非常喜欢
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
2019年08月12日 来自天津 回复
@头条新闻 谢谢支持
取消
微信二维码
微信二维码
支付宝二维码