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

  • 时间:
  • 浏览:2
  • 来源:龙行博客 - 专注共享小诺博客分享

1个多 网站的外观无疑是用户访问以及回访的重要因素,非要 ,朋友 就要更加注重于前端的优化。最近想看 狂放小栈这篇文章《让我的博客加进1个多 彩色横条》,灵感由此而发,但会 我在这篇文章中仅仅得到的是个灵感,其中的CSS代码未必详细,效果在寸言博客中未必太好。

狂放的思路是原先的:在网站顶部菜单加进1个多 背景,1个多 是颜色背景,1个多 图片背景,使得图片背景在颜色背景前。弊端:各种主题內部不同,不一定都要1个多 顶部菜单。如本站,非要1个多 主菜单和底部菜单,并非要 顶部菜单,也就非要像其所说的直接加进背景。优点:简单方便。

子言的思路是原先的:在网站顶部加进1个多 Div层,将其定位但会 始终固定在浏览器顶部,随着页面而移动,但会 始终在最顶层,不必被遮挡。缺乏:都要加进Div层,比较麻烦。优点:所有主题都适用,效果更佳。

刚结束了

首先,朋友 都要图片,直接贴出来吧,都要的请直接右键另存为。



接着,在网站顶部适当位置加进1个多 Div,自定义1个多 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: 30%;
    Z-index: 10;
}

样式解析:

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

height未必改动,将会图片的角度为4px;

margin-top为外围距离顶部角度,自行调整。将会你的Div并非要 突然出现距离什么的难题,就不都要。

Position这里定义的是固定。将会不都要就删除这行。

Width角度,将会加进后角度有异常,请调整你这名 项。

Z-index这是层数,越高,也就在什么都有有模块之上。

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

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

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



文章来自寸言博客


本文链接:https://www.mosq.cn/post-212.html

本博客所有文章除怪怪的声明外,均采用CC BY-NC-SA 4.0许可协议。转载请注明出处!