星空网 > 软件开发 > 网页设计

代码实现导航栏分割线

无需背景图片就可以实现导航栏分割线,颜色自定,线段虚实自定。

    .nav1{
              width:auto;
              height:50px;
              text-align:center;
              margin:13px auto 0;
            }
            .nav1 a{
              display: inline-block;
     text-decoration:none;
          }
            .nav1 a:hover{
          color:#09109e;
    border:6px none #fff;
   font-weight:bold;
  
            }
  
            .nav1 li{
              position:relative;
            }
       /*制作导航分隔线效果*/
            .nav1 li::before,
            .nav1 li::after{
              content:"";
              position:absolute;
              top:-5px;
              height: 40px;
              width: 1px;
            }
            .nav1 li::after{
              right: 0;
              background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%,
rgba(255,255,255,0));
              background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%,
rgba(255,255,255,0));
              background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba
(255,255,255,0));
              background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba
(255,255,255,0));
              background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba
(255,255,255,0));
            }
            .nav1 li::before{
              left: 0;
              background: -moz-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: -webkit-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: -o-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: -ms-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
              background: linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);
            }
            /*删除导航第一个和最后一个分隔线*/ 
     .nav1 li:first-child::before{
                display: none;
                }
      .nav1 li:last-child::after{
              display: none;
            }



代码实现导航栏分割线



原标题:代码实现导航栏分割线

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流