QQ登录 - 设为首页 - 加入收藏 - 网站地图 木易瓶子屋!第一时间了解互联网开发技术新鲜事儿!

亲!来点一下试试嘛。。。

木易瓶子屋每日新鲜技术平台 第一时间了解互联网的那些事儿

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

作者:木易瓶子┆ 分类:前端技术┆时间:2015-01-29┆点击: 188次┆tags: HTML5CSS3响应式垂直时间轴

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

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-width1170px) { 
  .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来给时间轴增加一些过渡动画,效果可能会更好。


欢迎转载但请注明出处及链接,商业媒体使用请联系编辑(QQ 363630845)。
HTML5,CSS3,响应式,垂直,时间轴
正在加载中……