移动端H5的简单时间轴效果

最近给移动端写接口，写完了才告诉我其中两个页面是H5的，需要我这边来做。本着“我是公司一块砖，哪里需要哪里搬”的原则，让做就做。结果一看原型，还有时间轴效果。第一反应：找度娘，找github，找oschina~~~确实也有不少的时间轴插件，但是总觉得都太花哨了，大道至简，自己来一个吧。

Talk is cheap,show me the code.

先上最终效果图

准备工作

两张图片

1：小圆点.png

2：左边的一根竖线.png

开始撸代码(HTML部分)

总体概况，用section实现

时间轴部分主要代码

开始撸代码(CSS部分)

气泡效果的小箭头

其他样式定位（包括 时间轴的线和点）

其他说明

1、_这是用的div效果，同时也可以用border-image的气泡效果实现_

2、_以上代码只是手机端的，没有做适配，因此无法放到PC端使用_

3、_技术是为业务服务的，当出现了PC端的需求再做PC端的实现吧_