• 可扩展进度条,商城常用!


    通过增加或删除 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;
    }
    
  • 相关阅读:
    C#中文件操作【File】和【Directory】
    MySql的不同之处
    FileStream读写文件【StreamWriter 和 StreamReader】
    将对象序列化为XML文档
    SQL自增长的数据插入
    POJ3356 AGTC (最短编辑距离问题)
    POJ3070Fibonacci(矩阵快速幂求Fibonacci数列)
    HDOJ1058 Humble Numbers
    第三届软件大赛预赛A组试题及答案
    HDOJ4526 威威猫系列故事——拼车记
  • 原文地址:https://www.cnblogs.com/pomelott/p/7398366.html
Copyright © 2020-2023  润新知