不够完美的步骤条（模仿淘宝重新绑定邮箱）

前言：

公司内一个绑定以及重新绑定邮箱（手机）的需求，并且需要对界面做一个进度条，类似支付宝如下：

本来打算直接贴图<img>上去算了，老大让我用CSS写锻炼下，并且截图需要12张，考虑了下还是自己学习下用CSS来完成。

自己先看了下支付宝和淘宝的前端代码，说真的看得不是很明白；于是Google下，终于找到了一个例子（http://blog.sathomas.me/post/tracking-progress-in-pure-css）。

截图如下：

不过这个例子有一点很不喜欢，就是开始和结尾不是圆圈；不过看懂了原理，那就自己重写吧。

原理很简单，只是之前从来没有这么想过，主要应用了一下几点：

1. 使用ol，li标签并且定义li"display:block-inline;"
2. 使用li的边框当做进度条
3. 使用:before,:after在元素之前后添加内容
4. 通过"position: relative;"调整位置

所以我的想法是：

1. 使用li的下边框作为进度条
2. 菱形图片使用li:before添加并调整位置
3. 菱形图片中的数值使用li:after添加并实现自动自增
4. 还少一样就是菱形下发的文字，我在li中添加span标签，然后调整位置

最终成果如下：http://2.yangqiong.sinaapp.com/works/progress_bar/

本人完全是CSS小白，在这其中还是学到了不少东西：

1. inline和block-inline的区别：都是元素变成行内元素，但是block-inline可以为行内元素添加宽度。
2. 使用:before 和 :after的在元素前后插入内容，图片以及自增连续编号。
3. 使用百分比移动位置，使进度条更通用。
   

但是还是有些地方没有处理好：

1. 各种总宽度下的自适应会导致错误
2. 菱形部分还是使用了图片，不是完全纯CSS
3. li中添加了span标签，感觉很不爽