zoukankan      html  css  js  c++  java
  • 纯CSS 箭头流程,网上找的,留着备用

     无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需

     实际效果

                                                         

     源代码:

       HTML:

        <div class="wrapper">

       <ul class="flow-steps">

         <li><b class="f"></b><a href="#">步骤一</a><s></s></li>

          <li class="on"><b></b><a href="#">步骤二</a><s></s></li>

             <li><b></b><a href="#">步骤三</a><s></s></li>

             <li><b></b><a href="#">步骤四</a><s></s></li>

        </ul>

    </div>

      CSS:

        .wrapper{ padding:20px;}

        .flow-steps{ position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;}

        .flow-steps li{ float:left; height:30px; margin-right:-32px; background:#d7d7d7; line-height:30px; overflow:hidden;}

      .flow-steps a{ display:block; float:left; 80px; padding: 0 18px 0 0; text-align:center; color:#333; text-decoration:none;}

      .flow-steps b{ float:left; 0px; height:0px; margin-top:-6px; border:21px solid #d7d7d7; border-left-color:#fff; font-size:0; line-height:0; z-index:9;}

      .flow-steps s{ position:relative; float:left; 0px; height:0px; margin-top:-2px; border:17px solid transparent; /*For IE6*/ _border-color:snow; _filter:chroma(color=snow);/*For IE6*/ border-left-color:#d7d7d7; font-size:0; line-height:0; z-index:99;}

      .flow-steps .on{ background:#ff6600;}

      .flow-steps .on a{ color:#fff;}

      .flow-steps .on b{ border-color:#ff6600; border-left-color:#fff; }

      .flow-steps .on s{ border-left-color:#ff6600;}

      .flow-steps .f{ border-color:#d7d7d7!important;}

       

  • 相关阅读:
    NETCore EF 数据库连接正确nuget和MySql错误异常
    JS 对象属性名排序
    NET 在一个数组中查找另一个数组所在起始位置(下标从0开始,未找到返回-1)
    NET 判断是否为回文
    NET/Regex 处理连续空格
    NET 已知excel表格前面26个是a到z,27是aa28是ab,以此类推,N是多少
    Regex 首字母转大写/小写,全大写,全小写
    .NETCore下访问img、js等静态资源404解决办法
    WPF-后台代码使用Behavior
    Socket-服务器端与客户端互相通信
  • 原文地址:https://www.cnblogs.com/jameslong/p/4115391.html
Copyright © 2011-2022 走看看