banner

纯CSS时间轴实现的办法,超简单的!

在以往,如果要在网页上,实现时间轴效果,我们需要使用jQuery来实现。虽然jQuery十分的漂亮美观,但使用方法来说,太麻烦了。而我们现在通过css3就可以时间一个简单漂亮的时间轴制作了,我现在将我研究的css时间轴制作的方法放上来,给大家参考一下。

time.jpg

首先,我将CSS代码部分放上来

.times {display:block;margin:15px 0;}/*首先,我们要创建一个容器class*/
.times ul {margin-left:25px;border-left:2px solid #ddd;list-style-type:none;}/*利用ul标签的特性,设置外边框左移25px,左边边框是2px粗的实心线,颜色一般要浅一点*/
.times ul li {width:100%;margin-left:-12px;line-height:20px;font-weight:narmal;}/*一般情况,通过li标签控制圆点回到时间线上,然后控制要出现的文字大小和是否粗体*/
.times ul li b {width:8px;height:8px;background:#fff;border:2px solid #555;margin:5px;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;overflow:hidden;display:inline-block;float:left;}/*利用处理加粗以外没有其它特别属性b标签做时间轴的圆点。*/
.times ul li span {padding-left:7px;font-size:12px;line-height:20px;color:#555;}/*设置span标签的属性,让它来做时间显示,加一点边距,使时间显示离时间线远一点*/
.times ul li:hover b {border:2px solid #ff6600;}/*注意这一行,前面的li标签后面加了一个:hover伪属性,意思是鼠标移上来,激活后面的属性,这样可以设置鼠标移动到整个时间范围的时候,时间点和时间显示会变色*/
.times ul li:hover span {color:#ff6600;}/*同上*/
.times ul li p {padding-left:15px;font-size:14px;line-height:25px;}/*这里利用段落标签p做文字介绍*/

每一行我都加了注释,大家可以看看。

现在我们再来看看看html部分怎么做得

<div class="times">
    <ul>
        <li><b></b><span>2010-01-01</span><p>这里是2010年哟</p></li>
        <!--b标签不输入内容,span标签内输入时间不限制格式,p标签内输入介绍内容。注意,标签内不能使用div分割-->
        <li><b></b><span>2011-01-01</span><p>这里是2011年哟</p></li>
        <li><b></b><span>2012-01-01</span><p>这里是2012年哟</p></li>
        <li><b></b><span>2013-01-01</span><p>这里是2013年哟</p></li>
        <li><b></b><span>2014-01-01</span><p>这里是2014年哟</p></li>
    </ul>
</div>

整个时间轴我就是利用ul li 特性、以及css的基本功能实现的,相对于jQuery来说,少了不少功夫。

我们继续看看预览图吧!

QQ截图20140718114221.png


我制作的主题都是有这种css时间轴效果的,使用办法跟这篇博文中的内容是一样的!

纯CSS的时间轴,第二种更佳方便方法

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

相关阅读

留言评论

8条留言
追梦人物
感觉有问题哦,ul 都没把 list-style-type 设为 none。我直接复制粘贴你的代码在浏览器显示的效果和你的预览图完全不一样。
橙色阳光
写这篇文章的主要目的是为了分享时间轴的制作方法,并非用于直接使用,很多处理是不严格的。
橙色阳光
嗯,这是我当时写的不严格;
这些代码都是依据已经格式化处理基本css以后用。
rin
http://www.9958.pw/post/time_line
橙色阳光
我是判你外链呢?还是判你外链呢?
shellingford
不错啊,我就喜欢这个风格
天兴工作室
用css做好处很多,坏处就是有些浏览器不兼容 万恶的ie
橙色阳光
IE6会挂,但是IE8+做一下兼容是没有问题