前言:
公司内一个绑定以及重新绑定邮箱(手机)的需求,并且需要对界面做一个进度条,类似支付宝如下:
本来打算直接贴图<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标签,然后调整位置
最终成果如下:http://2.yangqiong.sinaapp.com/works/progress_bar/
本人完全是CSS小白,在这其中还是学到了不少东西:
- inline和block-inline的区别:都是元素变成行内元素,但是block-inline可以为行内元素添加宽度。
- 使用:before 和 :after的在元素前后插入内容,图片以及自增连续编号。
- 使用百分比移动位置,使进度条更通用。
但是还是有些地方没有处理好:
- 各种总宽度下的自适应会导致错误
- 菱形部分还是使用了图片,不是完全纯CSS
- li中添加了span标签,感觉很不爽