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

亿七Seven

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

添加新评论

青春就是用来追忆的,当你怀揣着它时,它一文不值,只有将它耗尽后,再回过头看,一切才有了意义,爱过我们的人和伤害过我们的人,都是我们青春存在的意义。

既然活着来到这个世界,就没有打算活着回去。所以,在这有限的时间里,我们应该珍惜生命,珍惜机会,更要珍惜那得之不易的时间。因那滴答做响的时间脚步,一旦走过,再不回头。

青春是一个充满魁力,充满诱惑的时代。好动是青春,好奇是青春,好玩是青春。玩世不恭更是青春,我们的一切切都是青春。

要先打败任何事情得先学会打败自己。

我会把每一次改变当做成长,哪怕是痛也值得。