码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-20 00:40:10      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:3.5   position   width   进度条   ext   enter   size   lin   round   

通过增加或删除 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 {
  width: 49%;
  *width: 48.9%;
}
.l-process.l-process-3 .l-unit {
  width: 32%;
  *width: 31.9%;
}
.l-process.l-process-4 .l-unit {
  width: 23.5%;
  *width: 23.4%;
}
.l-process.l-process-5 .l-unit {
  width: 18.4%;
  *width: 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;
  width: 2%;
  height: 26px;
  overflow: hidden;
  background: #ccc;
}
.l-process .l-arrow .l-next {
  position: absolute;
  display: block;
  left: 0;
  top: -3px;
  height: 0;
  width: 0;
  overflow: hidden;
  border: solid 10px transparent;
  border-width: 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;
  width: 0;
  overflow: hidden;
  border: solid 10px transparent;
  border-width: 13px 8px;
  border-left-color: #ccc;
  _border-color: #000;
  _filter: chroma(color=#000000);
  _border-left-color: #ccc;
}

 

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

标签:3.5   position   width   进度条   ext   enter   size   lin   round   

原文地址:http://www.cnblogs.com/pomelott/p/7398366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!