网页时间轴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;
    width:8px;
    height:8px;
    border:2px solid #888;
    border-radius:50%;
    box-sizing:content-box;
    display: block;}ul li p { /*时间的描述*/
    margin-left:20px;
    line-height:30px;
    font-size:14px;
    color:#555;}

上面CSS部分代码都有简易注释，注意，如果使用了bootstrap框架，注意box-sizing:content-box与box-sizing:border-box的区别。

html部分

<ul>
    <li>
        <b>时间:2015-04-26</b>
        <p>时间轴内容</p>
    </li></ul>

浏览器兼容上：采用了CSS3的内容，所以要在IE9以上才能完美展现，圆点不会在ie8以下显示。

当然，这里调用IE的hack配合一个背景图，也能做到IE6的兼容。

嗯，大概提两个重要的点:

1、注意IE8以下的hack是 \9，所以圆点的选择器上将边框要声明为border:none\9;

2、用圆点图片做背景图，代替代码生成的圆点。

关于兼容不是硬性要求，但根据我说的两个点，完全可以兼容IE6的，有兴趣的可以试试。如果有问题，可以在下面留言。

目前在关于阳光的页面中有用到这个风格的时间轴。

基本的结构与样式部分就是这样的，具体的交互部分，需要使用者自己在根据自己需求进行修改

2015-12-03 更新完善方法