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

效果图片

开始

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

GIF滚动优化版 

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

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

#xiaobai {
    background:
url(https://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这是层数,越高,也就在其他模块之上。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

14510
来自专栏Python研发

HTML

一个完整的网页是由HTML(超文本标记语言),css(层叠样式表)JavaScript(动态脚本语言)三部分组成.

65520
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

64970
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

11510
来自专栏用户2442861的专栏

QLineEdit 输入验证(相关的设置)

LineEdit提 供一个文字输入栏位,可以输入文字或数字,我们可以对输入作验证,或是设定为一般显示、密码显示等等,以下的程式是个简单的设定示范:

36620
来自专栏淡定的博客

markdown基础语法

8020
来自专栏数据小魔方

创意九宫格图片制作技巧!

今天给大家分享九宫格照片的制作技巧! ▽ 是不是每次看到朋友圈有人发九宫格图片 都觉得特别羡慕 其实这种图片可以自己制作 步骤也不复杂 下面交给大家三种制作方法...

57390
来自专栏Porschev[钟慰]的专栏

jQuery Gallery Plugin在Asp.Net中使用

jQuery Gallery Plugin在Asp.Net中使用 推荐一个简单易用的Gallery插件:jQuery Gallery Plugin 下面是在As...

19790
来自专栏九彩拼盘的叨叨叨

CSS 核心技能点

10120
来自专栏菜鸟计划

vue组件详解(四)——使用slot分发内容

一、什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer><...

52240

扫码关注云+社区

领取腾讯云代金券