Welcome 您好!

    

分享一个导航栏下边渐变条效果,效果看图

html代码放导航栏的</div>后面,然后把css放到</head>前即可

html

<div class="divide-wrap">
<div class="colorbar-before"></div>
<div class="colorbar-after"></div>
<div class="colorbar"></div>
</div>

css

<style>
.divide-wrap {
    position: relative;
    height: 1px;
    z-index: 1;
}
.colorbar-before {
    content: "";
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 9;
    background-color: #040101;
}
.colorbar-after {
    content: "";
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 9;
    background-color: #fd0371;
}
.colorbar {
    width: 100%;
    height: 100%;
    z-index: 11;
    background: url(//fanyi.bdstatic.com/static/translation/img/header/colorbar_623c2a2.png) center no-repeat;
    position: relative;
}
</style>

图片素材

这个图片你可以自定义放路径里,替换什么css里的链接
colorbar_623c2a2.png

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post 第五版:响应式代挂网引导页
Next post   主题

添加新评论

快乐地过是一天,不快乐地过也是一天,我为什么不快快乐乐地过每一天呢?

岂能尽随人愿,但求无愧我心。

在你内心深处,还有无穷的潜力,有一天当你回首看时,你就会知道这绝对是真的。

活在当下,别在怀念过去或者憧憬未来中浪费掉你现在的生活。

挫折时,要像大树一样,被砍了,还能再长;也要像杂草一样,虽让人践踏,但还能勇敢地活下去。