首页 > 技术文章 > 网页时间轴HTML/CSS源代码,在兼容上可以做到IE6
2020
08-30

网页时间轴HTML/CSS源代码,在兼容上可以做到IE6

千淘万漉博客阿里云大使推广链接

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

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

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

时间轴

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

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部分

Markup
复制
<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 更新完善方法


本文》有 0 条评论

留下一个回复