特效描述:div+css布局 横向带箭头 步骤流程样式。div+css布局用css样式表控制div布局制作个横向步骤流程,通过css背景定位属性制作一个带有箭头提示的步骤流程样式。
代码结构
1. HTML代码
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
.demo{margin:0 auto;width:600px;}
.demo .main-flow{margin:20px 0 0 0;}
/* main-flow */
.main-flow li,.main-flow li.first,.main-flow li a,.main-flow li.last a,.main-flow .current,.main-flow .first-current,.main-flow .last-current,.main-flow .first-current,.main-flow .current a,.main-flow .first-current a,.main-flow .last-current a,.main-flow .last-current a{background:url(images/stepflow.png) no-repeat}
.main-flow{overflow:hidden;zoom:1;height:28px;}
.main-flow a{font-size:12px;font-weight:600;text-decoration:none;color:#fff;}
.main-flow li{float:left;position:relative; z-index:9;background-position:left -164px;line-height:1.0;}
.main-flow li.first{background-position:left -4px;}
.main-flow li a{display:block;float:left;position:relative;z-index:10;height:21px;margin:0 -15px 0 0;padding:7px 25px 0;line-height:12px;background-position:right -204px;}
.main-flow li.first a{padding:7px 25px 0 15px;}
.main-flow li.last a{background-position:right -84px;}
.main-flow .current,.main-flow .first-current,.main-flow .last-current{position:relative;z-index:11;background-position:left -244px;}
.main-flow .first-current{background-position:left -44px;}
.main-flow .current a,.main-flow .first-current a,.main-flow .last-current a{color:#427c9b;position:relative;z-index:12;background-position:right -284px;}
.main-flow .first-current a{padding:7px 25px 0 15px;}
.main-flow .last-current a{background-position:right -124px;}