小白安全博客

小白记忆
专注网络安全

 给网站顶部添加一个彩色横条

效果图片

给网站顶部添加一个彩色横条

开始

 首先,我们需要图片,直接贴出来吧,需要的请直接右键另存为。

[GIF优化版]简单地给网站顶部添加一个彩色横条



GIF滚动优化版 


 接着,在网站顶部适当位置添加一个Div,自定义一个id,当然你用class问题也不大。我命名的id为top-png.

 添加以下CSS代码到样式表,当然,如果你的主题支持自定义样式就添加到自定义样式里。

#xiaobai {
    background:
url(http://blog.xbbai.site/content/templates/Fys/sucai/dingbu.gif); 
    height: 4px;
    margin-top: 21px;
    position: fixed;
    width: 100%;
    Z-index: 10;
}


接着在header.php文件中引用DIV样式即可:

在</nav>前面添加如下代码:

 <div id="xiaobai"></div> 


样式解析:

 Background中的括号内链接请改为你的图片链接。

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

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

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

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

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





×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏,请先点一下下面的付款方式

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

 您阅读这篇文章共花了:

打赏作者
版权所有,转载注明出处:小白安全博客-菜鸟安全博客-小白个人博客 » 给网站顶部添加一个彩色横条»https://www.xiaobaibk.com/xiao-bai-157.html

发表评论

表情

网友评论(0)