纯CSS打造Flow-Steps导航
几个要点:
1.三角箭头效果是用border实现的,详细的可以google下CSS 三角
2.IE6下不支持border-color:transparent(透明),解决方法是先将其设置为一个不常用的颜色,然后再用IE的滤镜将其透明化(Demo中有注释)
3.每个Step之间的白色间隙为了等距所以处理比较复杂,当然也可以换成margin来做简单处理,但效果差很多;
兼容IE的Demo,这个版本唯一优势就是支持IE
CSS:
.wrapper{ padding:20px;} .flow-steps{ position:relative; height:30px; list-style:none; font-size:14px; overflow:hidden;} .flow-steps li{ float:left; height:30px; margin-right:-32px; background:#d7d7d7; line-height:30px; overflow:hidden;} .flow-steps a{ display:block; float:left; width:80px; padding: 0 18px 0 0; text-align:center; color:#333; text-decoration:none;} .flow-steps b{ float:left; width:0px; height:0px; margin-top:-6px; border:21px solid #d7d7d7; border-left-color:#fff; font-size:0; line-height:0; z-index:9;} .flow-steps s{ position:relative; float:left; width:0px; height:0px; margin-top:-2px; border:17px solid transparent; /*For IE6*/ _border-color:snow; _filter:chroma(color=snow);/*For IE6*/ border-left-color:#d7d7d7; font-size:0; line-height:0; z-index:99;} .flow-steps .on{ background:#ff6600;} .flow-steps .on a{ color:#fff;} .flow-steps .on b{ border-color:#ff6600; border-left-color:#fff; } .flow-steps .on s{ border-left-color:#ff6600;} .flow-steps .f{ border-color:#d7d7d7!important;}
HTML:
<div class="wrapper"> <ul class="flow-steps"> <li><b class="f"></b><a href="#">步骤一</a><s></s></li> <li class="on"><b></b><a href="#">步骤二</a><s></s></li> <li><b></b><a href="#">步骤三</a><s></s></li> <li><b></b><a href="#">iinterest.net</a><s></s></li> </ul> </div>