banner

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

阅读: 14498
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/57

相关阅读

留言评论

10条留言
唯历史
如何配上一张预览图就更好了
淘宝摄影
前几天不是有个消息, 微软测地放弃ie了
橙色阳光
微软还放弃了XP呐,你看还有多少人用XP……
知道91博客
没有效果图啊
橙色阳光
忘了做……看我的时间记录,用的就是这种方法
lentim
不能点击内容进入到相关的界面,感觉没啥用。
橙色阳光
你可以做啊,我这里只是分享了样式,不是做全面的功能
搞基
看了你做的主题,感觉好漂亮啊。
希望能在你这里学到一些知识。
大谋
这么多网站代码高亮不换行ZSX无视...
暴博客
蛋蛋推荐你把手机导航栏的JS弄到HEAD里面去,我是强迫症