HTML5与CSS3的响应式垂直时间轴示例

网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本文将给大家介绍一款基于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来给时间轴增加一些过渡动画,效果可能会更好。

时间: 2024-09-16 19:19:14

HTML5与CSS3的响应式垂直时间轴示例的相关文章

jQuery和CSS3制作的响应式水平时间轴的例子

我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸.那么 今天我要给大家分享的是一款支持响应式.支持触屏手势滑动的水平时间轴.   我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成.而div.events-content放置的是多个日期对应的事件节点,它又多个li元素

CSS图片响应式 垂直水平居中_javascript技巧

我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

使用CSS3制作响应式导航菜单的方法

关于使用响应式设计来创建一个手机导航栏,之前我曾经写过一个教程.现在我发现了一种新的方式,可以不使用JavaScript来实现响应式菜单.它完全使用整洁和语义化的HTML5标记,而且菜单可以居左.居中和居右对齐.不像前面一个教程中需要点击来展开,这个菜单可以在hover时展开,对用户更为友好.它也包含一个指示器来显示当前激活的菜单项.这种方式可以工作于所有的移动和桌面浏览器中,甚至包括IE. 演示 目标 这个教程的目标是向你展示如何把一个传统的列表菜单在更小的屏幕上转换为可伸展的菜单. 这种方式

08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧:   简单版本: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&q

CSS3中响应式数据表格例子

设计响应式页面的时候,最难的是表格table的处理,table作为数据表格设计不可缺少的元素,在数据应用项目中起着重要的作用,但是要想让表格适应各种屏幕还真有点麻烦.本文将用实例给大家演示如何使用CSS3来实现的响应式数据表格. 当屏幕足够小(如手机屏幕),以至于小于表格的最小宽度,如果不做响应式处理,那么将会出现水平滚动条,需要手动移动放大来查看超出屏幕的部分,这样体验很差.我们的解决办法是使用CSS @media queries来检测屏幕尺寸,当屏幕尺寸足够小的时候,重新布局table表格.

Android自定义View实现垂直时间轴布局

时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴,想必大家都不陌生,如下图: 分析 实现这个最常用的一个方法就是用ListView,我这里用继承LinearLayout的方式来实现.首先定义了一些自定义属性: attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable

用CSS3设计响应式导航菜单 - WEB开发者

来源:http://www.admin10000.com/document/1463.html#jtss-hi

HTML5和CSS3 Media Queries响应式Web设计方案

文章简介:通过CSS3 Media Query实现响应式Web设计. 十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上眼,满脑子就都是Drupal.博客.咖啡.使命召唤.南方公园...也许需要出门走一走了. OK开始说正经的了.在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹

《响应式Web设计:HTML5和CSS3实践指南》——1.4节使视频自适应于屏幕宽度

1.4 使视频自适应于屏幕宽度 流媒体视频同样可以为响应式的.在HTML5页面中嵌入响应式视频是一件非常简单的事情.如video标签支持百分比的宽度设置,但是问题在于,该方案需要网站主机拥有对应的视频源.如果已经有视频源,那么一切都易如反掌. 不过,使用视频托管网站(如YouTube或Vimeo)比自己托管更具优势.首先,自己的托管服务器可能会受到带宽或磁盘空间的限制.其次,相比于使用自己的托管服务器,使用视频托管网站上传可用的Web视频的整个过程更加便捷. 1.4.1 准备工作 视频托管网站允