网站顶部添加一个彩色横条 - 不老梦博客-emlog-专注于博客网站代码-南平SEO

不老梦博客
IISTYLE.CN 喜欢就CTRL+D吧
SeoС˲˲Ͳ԰ΰ<title>˲ſᰮ˲CSDNFC2Ϳѧ¹ⲩʲôֵLOFTERСһĸվԪ¬ɲŵĻо

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

福建Seo徐小明新浪博客新浪博客博客园冯矿伟新<title>浪博客优酷爱奇艺新浪博客CSDN博客FC2博客科学网博客月光博客什么值得买LOFTER爱范儿有声听书吧喷嚏网小众软件阮一峰的个人网站异次元软件卢松松博客西诺网中文互联网数据研究中心 百度已收录

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


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

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

#top-png {
    background: url(http://img.me0.pw/uploads/2017/07/FileName.txt.png);
    height: 4px;
    margin-top: 21px;
    position: fixed;
    width: 100%;
    Z-index: 10;
}

样式解析:

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

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

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

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

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

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

GIF滚动优化版 \ 2017/7/31更新

 感谢[橘纸]的提醒,博主特地用PS将此横条改成了GIF动态图,可以流畅地进行滚动 \ 逼格+1。

 直接将以下图片代替上面的静态图即可。



×

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

扫码支持
请土豪扫码随意打赏

打开微信扫一扫,即可进行扫码打赏哦

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

打赏作者
版权所有,转载注意明处:不老梦博客-emlog-专注于博客网站代码 » 网站顶部添加一个彩色横条
标签: emlog

发表评论

表情
看不清楚?点图切换

网友评论(0)