当前位置:首页教程中心网站教程子比头部添加景深特效 – 子比主题美化

子比头部添加景深特效 – 子比主题美化

源码引用了星语的小木屋的《B站首页顶部景深特效[源码]》

子比头部添加景深特效 – 子比主题美化

教程

首先打开header.php,在<body>后面找个喜欢的位置放置如下代码:

插入上面的代码之后,网站头部会出现景深的部分,但是会被顶部<header></header>内部的导航栏挡的严严实实。所以还需要加一些JS改进改进:

接着在header.php 中加入如下JS代码

这部分检查距离顶部距离是从网上找的,但我忘了出处了。。。这部分代码会让你的导航栏保持在景深区块的下面(景深区块在<style>中设定了高度为155px,所以只要保证:1.导航栏距离网页顶部的距离不小于155px,2.保证导航栏距离顶部大于155px时固定在视窗的上面,即top:0;,3.让导航栏随动)

但在这之后并没有完成。因为你会发现在<header>之后的元素会被移动后的导航栏挡住,有时候文章主内容还会挡住景深层。所以你还需要加入如下代码:

因为懒得再改代码了,就直接用之前的代码,只不过增加了一个class:jingshen2,。这个地方用visibility:hidden;将jingshen2中的图片隐藏,让这个图片作为占位符为我们顶出来140px的高度,这个高度可以去 .jingshen2 .banner的height中修改。CSS的visibility最低支持IE 4.0。所以完全不用怕有的游客浏览器太烂了出现多出一个景深区域的问题。

废案

当初原本想把占位图片的HTML做个小工具放到子比的“所有顶部”中。但我发现,那个所有不包括论坛,好像还不包括作者页面。所以废弃了。相关代码如下:

为什么小工具加入后会多出俩输入框,但并没有什么用呢。因为这个代码是我从我还在开发的主题里取下来的,我懒得修改了。

结束语

这就是所有的步骤了,我觉得不难,挺好用呢,就是记得如果你更新主题,记得备份。移植到其他主题上的时候,记得改改控制导航栏JS代码中的jQuery。

下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
声明:本文由沐夏oo发布,本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
网站教程

给子比评论区增加自动打卡功能 – 子比主题美化

2025-5-23 22:35:17

网站教程

社区图片九宫格展示美化(不含文章内)-子比主题美化

2025-5-24 20:29:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
搜索