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-positio