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;
    }
    
  • 相关阅读:
    tortoisegit 还原到某个版本
    AndroidStudio2021/3版 gradle7.0环境 自定义输出apk路径
    docker镜像打包save,载入load,启动run
    Failed to execute goal com.spotify:docker-maven-plugin:0.4.13:build (default-cli)
    windows10下载网址
    win10开启CPU虚拟化导致蓝屏信息
    swagger-ui.html
    git初始化
    node-sass 把变量导出给js共享。
    openlayers moveend getEventCoordinate
  • 原文地址:https://www.cnblogs.com/pomelott/p/7398366.html
Copyright © 2011-2022 走看看