通过增加或删除 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; }