前言：
公司内一个绑定以及重新绑定邮箱（手机）的需求，并且需要对界面做一个进度条，类似支付宝如下：
本来打算直接贴图<img>上去算了，老大让我用CSS写锻炼下，并且截图需要12张，考虑了下还是自己学习下用CSS来完成。
自己先看了下支付宝和淘宝的前端代码，说真的看得不是很明白；于是Google下，终于找到了一个例子（http://blog.sathomas.me/post/tracking-progress-in-pure-css）。
截图如下：
不过这个例子有一点很不喜欢，就是开始和结尾不是圆圈；不过看懂了原理，那就自己重写吧。
原理很简单，只是之前从来没有这么想过，主要应用了一下几点：
- 使用ol，li标签并且定义li"display:block-inline;"
- 使用li的边框当做进度条
- 使用:before,:after在元素之前后添加内容
- 通过"position: relative;"调整位置
所以我的想法是：
- 使用li的下边框作为进度条
- 菱形图片使用li:before添加并调整位置
- 菱形图片中的数值使用li:after添加并实现自动自增
- 还少一样就是菱形下发的文字，我在li中添加span标签，然后调整位置
本人完全是CSS小白，在这其中还是学到了不少东西：
- inline和block-inline的区别：都是元素变成行内元素，但是block-inline可以为行内元素添加宽度。
- 使用:before
和 :after的在元素前后插入内容，图片以及自增连续编号。
- 使用百分比移动位置，使进度条更通用。
但是还是有些地方没有处理好：
- 各种总宽度下的自适应会导致错误
- 菱形部分还是使用了图片，不是完全纯CSS
- li中添加了span标签，感觉很不爽
不够完美的步骤条（模仿淘宝重新绑定邮箱）
原文：http://www.cnblogs.com/yangqionggo/p/3528937.html
