zoukankan      html  css  js  c++  java
  • 代码实现导航栏分割线

    无需背景图片就可以实现导航栏分割线,颜色自定,线段虚实自定。
    .nav1{
                  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;
                   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;
                }
  • 相关阅读:
    DockerFile构建镜像
    docker基本命令
    docker持久化
    JS 中 this 指向问题
    解决"/usr/local/bin/dockercompose: Permission denied"问题
    docker配置国内镜像
    docker网络
    国内常用镜像地址
    Visual Studio中快捷键收缩和展开代码段方法
    STM32中关于RCC时钟的理解
  • 原文地址:https://www.cnblogs.com/Zmmy/p/8536542.html
Copyright © 2011-2022 走看看