HTML5+CSS3实现的响应式垂直时间轴

网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB应用。

v_timeline

 

HTML

我们使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。注意要看到本例演示效果,需要你的浏览器支持HTML5和CSS3。

<section?id="cd-timeline"?class="cd-container">?
????<div?class="cd-timeline-block">?
????????<div?class="cd-timeline-img?cd-picture">?
????????????<img?src="img/cd-icon-picture.svg"?alt="Picture">?
????????</div>?
?
????????<div?class="cd-timeline-content">?
????????????<h2>HTML5+CSS3实现的响应式垂直时间轴</h2>?????????????
????????????<p>网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB应用。</p>?
????????????<a?href="http://www.helloweba.com/view-blog-285.html"?class="cd-read-more"?target="_blank">阅读全文</a>?
????????????<span?class="cd-date">2015-01-06</span>?
????????</div>?
????</div>?
????<div?class="cd-timeline-block">?
????????...?
????</div>?
?????
</div>?

本例使用了svg图像作为图标,你也可以换成png,gif格式图像。
CSS
我们使用:before伪类在时间轴#cd-timeline的前面创建一条垂直线,那么时间轴各个节点的内容都会基于这垂直线。

#cd-timeline?{?
??position:?relative;?
??padding:?2em?0;?
??margin-top:?2em;?
??margin-bottom:?2em;?
}?
#cd-timeline::before?{?
??content:?'';?
??position:?absolute;?
??top:?0;?
??left:?18px;?
??height:?100%;?
??width:?4px;?
??background:?#d7e4ed;?
}?

好,接下来我们要做的是,根据用户浏览器窗口的大小来调整时间轴的布局,当浏览器窗口非常大时,时间轴的各节点内容会分布在垂直线的两边(垂直线居中),当浏览器窗口足够小如手机,iPad中竖屏浏览时,时间轴的各节点内容会排列在垂直线的右边(垂直线靠左),这个俗称响应式布局。

.cd-timeline-block?{?
??position:?relative;?
??margin:?2em?0;?
}?
.cd-timeline-block:after?{?
??content:?"";?
??display:?table;?
??clear:?both;?
}?
.cd-timeline-block:first-child?{?
??margin-top:?0;?
}?
.cd-timeline-block:last-child?{?
??margin-bottom:?0;?
}?
@media?only?screen?and?(min-width:?1170px)?{?
??.cd-timeline-block:nth-child(even)?.cd-timeline-content?{?
????float:?right;?
??}?
??.cd-timeline-block:nth-child(even)?.cd-timeline-content::before?{?
????top:?24px;?
????left:?auto;?
????right:?100%;?
????border-color:?transparent;?
????border-right-color:?white;?
??}?
??.cd-timeline-block:nth-child(even)?.cd-timeline-content?.cd-read-more?{?
????float:?right;?
??}?
??.cd-timeline-block:nth-child(even)?.cd-timeline-content?.cd-date?{?
????left:?auto;?
????right:?122%;?
????text-align:?right;?
??}?
}?

CSS3中可以使用@media判断设备的屏幕尺寸,根据不同的尺寸执行不同的css样式。本例中还用到了CSS3的阴影、圆角等效果,文中不再详述,大家可以参考网上好多关于CSS3的基础教程,你也可以直接下载源码包,本例的css全部整理在style.css文件中。当然你也可以在本例的基础上使用JS和CSS3来给时间轴增加一些过渡动画,效果可能会更好。

????