森七

[GIF优化版]简单地给网站顶部添加一个彩色横条
一个网站的外观无疑是用户访问以及回访的重要因素,那么,我们就要更加注重于前端的优化。最近看到狂放小栈这篇文章《给你...
扫描右侧二维码阅读全文
28
2017/07

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

一个网站的外观无疑是用户访问以及回访的重要因素,那么,我们就要更加注重于前端的优化。最近看到狂放小栈这篇文章《给你的博客添加一个彩色横条》,灵感由此而发,但是我在这篇文章中仅仅得到的是个灵感,其中的CSS代码并不详细,效果在寸言博客中并不太好。

狂放的思路是这样的:在网站顶部菜单添加2个背景,一个是颜色背景,一个图片背景,使得图片背景在颜色背景前。弊端:各种主题结构不同,不一定都有一个顶部菜单。如本站,只有一个主菜单和底部菜单,并没有顶部菜单,也就不能像其所说的直接添加背景。优点:简单方便。

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

开始

首先,我们需要图片,直接贴出来吧,需要的请直接右键另存为。
GIF优化版简单地给网站顶部添加一个彩色横条
接着,在网站顶部适当位置添加一个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优化版简单地给网站顶部添加一个彩色横条
文章来自寸言博客

Last modification:February 9th, 2019 at 09:51 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

7 comments

  1. 无人小站

    又是一波增加网站加载时间的东西@(观察)

    1. 森七
      @无人小站

      @无人小站:这种事情要慢慢积累@(坐等)

  2. 杨小杰

    很不错哦,big+1

    1. 森七
      @杨小杰

      @杨小杰:big@(想一想)

  3. 玖梦

    @(鼓掌)
    可爱的森七,这些表情的代码能不能分享给我啦?

    1. 森七
      @玖梦

      @玖梦:嗯,要的人不少,那我就这2天分享出来吧@(装大款)

      1. 玖梦
        @森七

        @森七:好的,你 怎么能这么可爱@[doge]