温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-08-09 09:57:48 来源:亿速云 阅读:165 作者:chen 栏目:开发技术

这篇文章主要介绍“HTML5+CSS3怎么实现响应式垂直时间轴”,在日常操作中,相信很多人在HTML5+CSS3怎么实现响应式垂直时间轴问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5+CSS3怎么实现响应式垂直时间轴”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

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

HTML

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

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

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

到此,关于“HTML5+CSS3怎么实现响应式垂直时间轴”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI