zoukankan      html  css  js  c++  java
  • 可扩展进度条,商城常用!

    通过增加或删除 l-current、l-current-unit、l-arrow-complete来修改状态,l-process-4 为显示四个状态的进度条,可改变的数字有1、2、3、4

    <div class="l-process l-process-4 clear-fix l-offset-span4" >
        <span class="l-unit l-current">填写用户名</span>
        <span class="l-arrow l-current-unit l-arrow-complete">
            <span class="l-next"></span>
            <span class="l-prev"></span>
        </span>
        <span class="l-unit l-current">验证身份</span>
        <span class="l-arrow l-current-unit l-arrow-complete">
            <span class="l-next"></span>
            <span class="l-prev"></span>
        </span>
        <span class="l-unit l-current">设置新密码</span>
        <span class="l-arrow l-current-unit ">
            <span class="l-next"></span>
            <span class="l-prev"></span>
        </span>
        <span class="l-unit">完成</span>
    </div>
    
    .process {
      height: 26px;
    }
    .l-process.l-process-2 .l-unit {
       49%;
      * 48.9%;
    }
    .l-process.l-process-3 .l-unit {
       32%;
      * 31.9%;
    }
    .l-process.l-process-4 .l-unit {
       23.5%;
      * 23.4%;
    }
    .l-process.l-process-5 .l-unit {
       18.4%;
      * 18.3%;
    }
    .l-process .l-current {
      background: #00adee !important;
    }
    .l-process .l-current-unit.l-arrow-complete {
      background: #00adee !important;
    }
    .l-process .l-unit {
      float: left;
      display: inline;
      height: 26px;
      background: #ccc;
      overflow: hidden;
      text-align: center;
      color: #fff;
      font-size: 14px;
      line-height: 1.85;
    }
    .l-process .l-arrow {
      position: relative;
      float: left;
      display: inline;
       2%;
      height: 26px;
      overflow: hidden;
      background: #ccc;
    }
    .l-process .l-arrow .l-next {
      position: absolute;
      display: block;
      left: 0;
      top: -3px;
      height: 0;
       0;
      overflow: hidden;
      border: solid 10px transparent;
      border- 16px 10px;
      border-left-color: #fff;
      _border-color: #000;
      _filter: chroma(color=#000000);
      _border-left-color: #fff;
    }
    .l-process .l-current-unit .l-prev {
      border-left-color: #00adee !important;
    }
    .l-process .l-arrow .l-prev {
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      height: 0;
       0;
      overflow: hidden;
      border: solid 10px transparent;
      border- 13px 8px;
      border-left-color: #ccc;
      _border-color: #000;
      _filter: chroma(color=#000000);
      _border-left-color: #ccc;
    }
    
  • 相关阅读:
    2021昆明站K-Riichi!!(麻将)
    数据结构 Week 3 --- dsu on tree 和 点分治
    数据结构 Week 2 --- 平衡树
    数据结构 Week 1 --- 从线段树到主席树
    一些思维题(三)
    一些思维题(二)
    2021ICPC昆明站总结及补题
    2021ICPC昆明M题 非主席树做法
    2020ICPC昆明参赛
    记5.28leetcode简单题
  • 原文地址:https://www.cnblogs.com/pomelott/p/7398366.html
Copyright © 2011-2022 走看看