html时间日期代码的原理,网页时间轴HTML/CSS源代码，在兼容上可以做到IE6

在展现一个事情的发展过程或流程时，大家一般都会选择用时间轴方式来展现，多数朋友会去网上下载时间轴的jq插件。

插件下载以后即可使用，但有时候还是多有不便，毕竟不是自己写的代码，如果注释不够明确，浪费的时间，都可以自己去写一遍了。

阳光作为一个喜欢研究实现原理的人，对css时间轴实现方案一直都在关注，随着时间的发展，一年多的经验积累，对于时间轴的实现方案，有了进一步的了解与掌握。

常见的时间轴制作方法，这里提供最基本的表现层与结构层的代码，即HTML/CSS部分。

CSS代码ul { /*做时间轴的线*/

margin-left:20px;

border-left:2px solid #ccc;

}

ul li { /*圆点定位的父层*/

position:relative;

}

ul li span { /*时间*/

margin-left:20px;

line-height:24px;

font-size:12px;

color:#888;

}

ul li span:after { /*圆点*/

content:'';

position:absolute;

top:6px;

left:-7px;