网页时间轴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 更新完善方法

相关推荐

留言评论

10条留言
访客
访客
唯历史

如何配上一张预览图就更好了

橙色阳光
@淘宝摄影 前几天不是有个消息, 微软测地放弃ie了

微软还放弃了XP呐,你看还有多少人用XP……

淘宝摄影

前几天不是有个消息, 微软测地放弃ie了

橙色阳光
@lentim 不能点击内容进入到相关的界面,感觉没啥用。

你可以做啊,我这里只是分享了样式,不是做全面的功能

lentim
@橙色阳光 忘了做……看我的时间记录,用的就是这种方法

不能点击内容进入到相关的界面,感觉没啥用。

橙色阳光
@知道91博客 没有效果图啊

忘了做……看我的时间记录,用的就是这种方法

知道91博客

没有效果图啊

搞基

看了你做的主题,感觉好漂亮啊。
希望能在你这里学到一些知识。

大谋

这么多网站代码高亮不换行ZSX无视...

暴博客

蛋蛋推荐你把手机导航栏的JS弄到HEAD里面去,我是强迫症