成都响应式网站建设：响应式代码示例演示-桔子科技网站建设设计公司

成都响应式网站建设：响应式代码示例演示

发布人：桔子科技发布时间：2017-09-09 09:06:26 分享到：

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

我们使用了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=" 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来给时间轴增加一些过渡动画，效果可能会更好。

本文是成都网站建设公司、成都网站设计制作公司、成都APP开发公司、成都响应式网站建设、成都VR全景制作-桔子科技公司为您整理！
成都网站建设 ,成都网站设计,成都网站制作,成都网页设计，成都网站建设公司 ,成都网站设计公司,成都网站制作公司，成都网页设计公司，网站建设、网站制作、网站设计、网页设计、成都响应式网站建设、成都响应式网站制作、成都响应式网站开发、成都全景制作、成都VR全景制作、成都手机网站建设，手机网站建设，成都APP开发，APP开发，成都建网站，成都做网站，成都商城网站建设，集团网站建设,网站建设,高端网站建设,品牌网站建设,成都平台网站建设，成都响应式网站建设，成都微信网站建设，成都微商城网站建设，成都微信营销，成都微信小程序开发、成都网站优化，成都网络公司。

下一篇：成都响应式网站建设：响应式的设计方法上一篇：成都响应式网站建设：梳理下响应式设计整体页面排版布局