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

前言:

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

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

本来打算直接贴图<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标签,感觉很不爽

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

上一篇:hdu 2059:龟兔赛跑(动态规划 DP)


下一篇:VC中对话框程序不响应WM_CHAR WM_KEYUP \ WM_KEYDOWN消息