类似时间轴的样式

从事开发有些时日了，基本遇到的很多的问题和技术都在别人博客上看到，感觉也应该有些自己的沉淀，便准备自己写些文章供自己和大家一起探讨研究，希望能总结些东西以后能少走些弯路，如果文中有什么不对的希望大家能及时指出。

公司需要物流信息列表来显示订单状况，左侧的提醒便是类似时间轴的。希望大家能参考代码举一反三写出各种炫酷的时间轴。

.new{color:#ff3a48;margin-left: 30px;position: relative;}
.new:before{content:'';position:absolute;top:27px;left:-20px;height:100%;width:1px;background: #eaeaea;}
.new:after{content:'';position:absolute;top:18px;left:-29px;width: 18px;height: 18px;
            background: url("../../../images/round-red.png") no-repeat;background-size: 100%;}
.old{color:#999;border-top: 1px solid #eaeaea;margin-left: 30px;position: relative;}
.old:before{content:'';position:absolute;top:0;left:-20px;height:100%;width:1px;background: #eaeaea;}
.old:after{content:'';position:absolute;top:18px;left:-25px;width: 10px;height: 10px;
            background: url("../../../images/round-gray.png") no-repeat;background-size: 100%;}

 

借助了css的伪类before和after，不然写起来还是有点小难度的，接下来在html的div引用就完成了，是不是很简单呢？

1 <div class="new">
2       <p>礼品已到达上海浦东张江公司</p>
3       <p class="f6">2015-05-15 12:57:23</p>
4 </div>
5 <div class="old">
6        <p>礼品已到达上海浦东张江公司</p>
7        <p class="f6">2015-05-15 12:57:23</p>
8 </div>

这是效果图，2个小圆圈的图片可以改下路径换成你们喜欢的图片

如果你觉得这篇随笔对你有帮助可以支付宝(左)或微信(右)打赏小毅喝杯咖啡 ^_^