乐搜资源网是行业内专业提供全网资源分享,活动资讯_技术教程_网站源码等等,是一网络技术爱好者的学习之地。
Emlog添加顶部动态彩条教程-乐搜资源网-第2张图片

Emlog添加顶部动态彩条教程

乐搜资源网 网站教程

给Emlog博客网站顶部添加一个彩色横条,样式预览请看下图↓

思路:在网站顶部添加一个Div层,将其定位并且始终固定在浏览器顶部,随着页面而移动,并且始终在最顶层,不会被遮挡。缺陷:需要添加Div层,比较麻烦。优点:所有主题都适用,效果更佳。

首先,我们需要动态彩条gif图片,当然你有喜欢的gif彩条也可以替换,下面直接提供彩条原文件,喜欢的自己保存到空间用自己网站外链效果更佳,替换下方gif图片地址,嫌麻烦直接用我发的。
Emlog添加顶部动态彩条教程-乐搜资源网- 第3张图片
添加彩条教程:

在你现在使用的Emlog主题style.css 底部添加以下代码:

/*Emlog顶部动态彩条*/ #top-img { background: url(https://ws2.sinaimg.cn/large/ea39e041gy1fsel4ovafog20ag004dfs.gif); height:4px;
    top:0px;
    position: fixed;
    width:100%;
    Z-index:9999;
}

注:

括号内链接可以改成你的图片链接,也可以直接用我发的。

height不要改动,因为图片的高度为4px;

top为外围距离顶部高度,自行调整。如果你的Div并没有出现距离问题,就不需要。

Position这里定义的是固定。如果不需要就删除这行。

Width宽度,如果添加后宽度有异常,请调整这一项。

Z-index这是层数,越高,也就在其他模块之上。

 

然后在header.php最下面的 </nav>
前面添加以下代码

<div id="top-img"></div>

 
最后查看你的Emlog博客效果吧!

记得更新缓存+刷新浏览器缓存!使用CDN缓存的用户,记得刷新CDN缓存!

标签: 网站代码

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:2820695103@qq.com

同类推荐
评论列表

最新评论
推荐内容
热门文章
随机推荐
资源标签
网站教程 Emlog添加顶部动态彩条教程
给Emlog博客网站顶部添加一个彩色横条,样式预览请看下图↓ 思路:在网站顶部添加一个Div层,将其定位并且始终固定在浏览器顶部,随着页面而移动,并且...
扫描二维码阅读原文
乐搜资源网 January, 01
生成社交图 ×
sitemap