html5箭头如何布局,div+css布局制作横向带箭头步骤流程样式

特效描述：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;}

1. 第1步
2. 第2步
3. 第3步
4. 第4步
5. 第5步
6. 成功

1. 第1步
2. 第2步
3. 第3步
4. 第4步
5. 第5步
6. 成功

1. 第1步
2. 第2步
3. 第3步
4. 第4步
5. 第5步
6. 成功

1. 第1步
2. 第2步
3. 第3步
4. 第4步
5. 第5步
6. 成功

1. 第1步
2. 第2步
3. 第3步
4. 第4步
5. 第5步
6. 成功

1. 第1步
2. 第2步
3. 第3步
4. 第4步
5. 第5步
6. 成功