网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本文将给大家介绍一款基于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-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来给时间轴增加一些过渡动画,效果可能会更好。
来源于:http://www.helloweba.com/view-blog-285.html
相关推荐
实现了以响应式垂直时间轴显示多个标题与内容概括效果,网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本段代码适用于所有网页使用,有需要的朋友们可以前来下载使用。。
HTML5+CSS3响应式垂直时间轴,没有用js。挺好看的,分享给大家
HTML5+CSS3实现的响应式垂直时间轴效果源码.zip
html5+css3响应式banner 响应式宽屏BANNER
HTML5 + CSS3 实现 3d 室内布局源码。
html5+css3实现响应式通用黑色的用户登录手机页面代码.zip
Html5+js+CSS3实现3D旋转效果
《精通html5+css3+JavaScript页面设计》代码
《响应式Web开发项目教程(HTML5+CSS3+Bootstrap)》-教学PPT.rar,需要下载的从速!
圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码...
《HTML5+CSS3+jQuery应用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与制作的从业经验,通过八大商业案例,以HTML5搭建结构、CSS3设置样式、jQuery实现动态应用这三者相结合的实际应用方式,详细讲解它们...
60套HTML5+CSS3后台管理登录模板 响应式 bootstrap 样式很漂亮 可以学到标签栏 数据可视化 可编辑条目等
html5+css3实现html5游戏页面这个作品来源:http://www.jq-school.com/Detail.aspx?id=487
该文档是HTML5+CSS3的总结笔记,把工作中的常用的知识点个记录下来,仅供学习和工作的参考资料,不做商业用途,版权归本人所有,侵权必究!
基于HTML5+css3实现的两人即时通讯聊天界面,界面风格相当漂亮,可直接使用,也可简单修改为自己想要的样式,仅供大家参考。
HTML+CSS+JavaScript+php+mysql帮助手册(内含html5+css3+javascript5帮助手册)。
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
以上所述是小编给大家介绍的利用HTML5+css3+jquery+weui实现仿微信聊天界面功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!