[GIF优化版]简单地给网站顶部添加一个彩色横条
0
2114
2017年10月12日
一个网站的外观无疑是用户访问以及回访的重要因素，那么，我们就要更加注重于前端的优化。最近看到狂放小栈这篇文章《给你的博客添加一个彩色横条》，灵感由此而发，但是我在这篇文章中仅仅得到的是个灵感，其中的CSS代码并不详细，效果在寸言博客中并不太好。
狂放的思路是这样的：在网站顶部菜单添加2个背景，一个是颜色背景，一个图片背景，使得图片背景在颜色背景前。弊端：各种主题结构不同，不一定都有一个顶部菜单。如本站，只有一个主菜单和底部菜单，并没有顶部菜单，也就不能像其所说的直接添加背景。优点：简单方便。
子言的思路是这样的：在网站顶部添加一个Div层，将其定位并且始终固定在浏览器顶部，随着页面而移动，并且始终在最顶层，不会被遮挡。缺陷：需要添加Div层，比较麻烦。优点：所有主题都适用，效果更佳。
开始
首先，我们需要图片，直接贴出来吧，需要的请直接右键另存为。
![[GIF优化版]简单地给网站顶部添加一个彩色横条](https://img.alicdn.com/imgextra/i4/1723432198/TB2d.ehXnzfFuJjSsphXXc_xpXa_!!1723432198.png){kind=small}
接着，在网站顶部适当位置添加一个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。
直接将以下图片代替上面的静态图即可。
![[GIF优化版]简单地给网站顶部添加一个彩色横条](https://img.alicdn.com/imgextra/i2/1723432198/TB2LsCjXb6fFuJjy0FaXXc2uFXa_!!1723432198.gif){kind=small}
文章来自寸言博客
在线咨询
这个主题简介啊