css实现步骤条/进度条


未标题-1.png

下面我们开始用CSS3来直接写这个步骤条


原理解析:

1,让除了最后一步的其它步骤平分整个宽度;

2,横线单度写背景色;

3,圆背景用圆角;

4,文字居左;

5,父级盒子相对定位,是后一步绝对定位到右边。


html代码:

<!-- 步骤条     star -->
<div style="width:90%; margin:20px auto; background:#fff; padding:10px; ">
	<ul class="stepBar">
		<li class="select"><p class="bgline"></p><div class="stepCont"><p class="number">1</p><p class="text">第一步</p></div></li>
		<li class="select selectLast"><p class="bgline"></p><div class="stepCont"><p class="number">2</p><p class="text">第二步</p></div></li>
		<li><p class="bgline"></p><div class="stepCont"><p class="number">3</p><p class="text">第三步</p></div></li>
		<li><p class="bgline"></p><div class="stepCont"><p class="number">4</p><p class="text">第四步</p></div></li>
		<li><div class="stepCont"><p class="number">5</p><p class="text">第五步</p></div></li>
	</ul>
</div>
<!-- 步骤条     end -->



css代码:

/*步骤条*/
.stepBar{.relative; overflow:hidden;
	li{float:left; width:25%;  height:76px; position:relative;
		p.bgline{position:absolute; height:14px; line-height:14px; overflow:hidden; left:-1px; top:11px; background:#e1e4e9; width:100%;}
		.stepCont{position:absolute; width:120px; left:-2px; top:0; 
			p.number{.absolute; width:36px; height:36px; line-height:36px;left:0; background:#e1e4e9;  border-radius:50%; text-align:center; color:#afb4bc; font-weight:bold;}
			p.text{width:100%; text-align:left; position:absolute;left:0; top:36px; line-height:40px;}
		}
	}
	li:first-child{
		p.bgline{left:1px;}
		.stepCont{left:0;}
	}
	li:last-child{width:120px; position:absolute; top:0; right:0; clear:both;
		.stepCont{left:0;
			p.number{left:84px;}
			p.text{right:0!important; text-align:right;}
		}
	}
	li.select{
		p.bgline{background:green;}
		p.number{background:green; color:white;}
	}
	li.select.selectLast{
		p.bgline{background:#e1e4e9;}
	}
}


版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:css实现步骤条/进度条

本文地址:http://www.aweb.cc/article/detail/id/505.html

保证低版本IE不报错的使用高级插件库 <<上一篇 下一篇>>CSS制作面包屑导航