开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css垂直时间轴

CSS垂直时间轴是一种利用HTML和CSS技术创建的时间线布局，它通过在页面上垂直排列事件标记来展示时间线上的重要事件。以下是关于CSS垂直时间轴的相关信息：

基本概念

HTML结构：通常使用无序列表（<ul>）和列表项（<li>）来创建时间轴的结构，每个列表项代表时间线上的一个事件。
CSS样式：通过CSS来设置时间轴的样式，包括颜色、字体、布局等，以增强视觉效果。

优势

视觉效果：垂直时间轴通过垂直排列事件标记，使得时间线的展示更加直观和易于理解。
响应式设计：结合CSS的媒体查询，可以轻松实现时间轴的响应式设计，适应不同设备和屏幕尺寸。

类型

静态时间轴：静态时间轴通常用于展示固定的事件序列，不需要交互。
动态时间轴：动态时间轴可以通过JavaScript添加交互功能，如事件展开、时间线滚动等。

应用场景

个人时间线：如个人成长经历、学习里程碑等。
企业时间线：展示公司发展历程、重大项目等。
历史事件：教育或历史类网站中展示历史事件的发展顺序。

实现方法

纯CSS实现：通过CSS的伪元素和动画效果来创建时间轴。
结合JavaScript：使用JavaScript来动态添加或移除时间轴上的事件节点，增加交互性。

示例代码

以下是一个简单的纯CSS实现垂直时间轴的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical Timeline</title>
<style>
.timeline {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ddd;
  left: 50%;
  margin-left: -1px;
}

.timeline li {
  position: relative;
  margin-bottom: 20px;
}

.timeline li:last-child {
  margin-bottom: 0;
}

.timeline li:before,
.timeline li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border: 2px solid #ddd;
  width: 50%;
  height: 20px;
}

.timeline li:after {
  right: auto;
  left: 50%;
  border-left: none;
  border-right: none;
}

.timeline li h3 {
  position: relative;
  padding-left: 30px;
}

.timeline li h3:before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
}
</style>
</head>
<body>

<ul class="timeline">
  <li>
    <h3>2023年6月</h3>
    <p>完成项目A</p>
  </li>
  <li>
    <h3>2023年7月</h3>
    <p>完成项目B</p>
  </li>
  <li>
    <h3>2023年8月</h3>
    <p>完成项目C</p>
  </li>
</ul>

</body>
</html>

通过上述代码，你可以创建一个简单的垂直时间轴，用于展示不同项目的时间线。这种方法简单且易于扩展，适合快速实现一个视觉上吸引人的时间轴效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5+CSS3响应式垂直时间轴，高端，大气

HTML5+CSS3响应式垂直时间轴，使用了HTML5标签，时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中，多个DIV形成一个序列，并把这些...响应式垂直时间轴 css" /> css"> h2.top_title {border-bottom...响应式垂直时间轴请使用IE9+或Chrome，Firefox高级浏览器或手机访问本页垂直时间轴网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。...本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。

1.9K2 0

炫酷CSS3垂直时间轴特效开源库【合集】

界面介绍这是一款炫酷css3垂直时间轴特效。该css3垂直时间轴特效通过伪元素来制作炫酷的半圆形，所有半圆形连接为一条曲线路径，组成时间轴的线路。兼容PC端和移动端。 ? （PC端） ?...（移动端）代码结构在页面中引入bootstrap.min.css文件。...css/bootstrap.min.css" rel="stylesheet"> HTML结构该...css3垂直时间轴的HTML结构如下： CSS样式为该css3垂直时间轴添加下面的CSS代码。

1.3K1 0

超炫酷CSS3垂直时间轴特效开源库

简要介绍这是一款超炫酷CSS3垂直时间轴特效。该特效通过HTML DOM元素和CSS transform来制作非常炫酷的时间轴布局效果。 ? （电脑端） ?...（移动端）使用方法在页面中引入fontawesome.min.css和bootstrap.min.css文件。...css" rel="stylesheet"> css" rel="stylesheet..."> HTML结构该垂直时间轴的HTML DOM元素结构如下： <div class...样式然后通过下面的CSS样式来制作垂直时间轴效果。

1K3 0

CSS垂直居中

class="parent"> 哈哈扩展知识 vertical-align属性：用于设置文本内容的垂直方向对齐方式...div class="parent"> 哈哈优缺点分析优点：父级元素是否脱离文档流，不影响子级元素垂直居中效果...缺点：transform属性是CSS3新属性，浏览器支持情况不好方案3 关键代码父类：position: relative; 子类： position: absolute; top: 0; bottom

3.4K3 0

Css 垂直居中

主要摘自：《CSS 揭秘》，强烈推荐的一本书。 “44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。”...在本篇攻略中，我们将探索现代 CSS 的强大威力，以全新的思路去攻克各种场景下的垂直居中难题。...遗憾的是，对于绝大多数 CSS 属性(包括 margin)来说，百分比都是以其父元素的尺寸为基准进行解析的。 CSS 领域有一个很常见的现象，真正的解决方案往往来自于我们最意想不到的地方。...虽然没有垂直居中效果，但也是完全可以接受的。 Flexbox 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。.../w3.org/TR/css-align) 的计划，在未来，对于简单的垂直居中需求，我们完全不需要动用特殊的布局模式了。

2.8K1 0

基于Bootstrap垂直响应的jQuery时间轴特效

如果作为大事记，则时间轴上会显示这个事件。这个时间轴整合了3个模板，一个是timelined；——支持时间轴线上的图标效果。...-- 测试时间轴 --> css/bootstrap.min.css"> css" media="all..." href="/static/css/bootstrap-glyphicons.css"> css" media="all" href...="/static/css/timeline.css"> css?

2.3K4 0

纯CSS时间轴列表

一.场景需要实现时间轴列表，左边一串小圆点，右边是列表内容，需要小圆点位置与列表项对应，最终效果如下： timeline 二.实现方案有几个细节：小圆点要与列表项对齐首项、末项的时间线不能超出小圆点

2.9K2 1

CSS实现垂直居中布局

垂直居中首先将与的高度设置为100%（为演示父元素不定宽高的效果），并清除的默认样式 html,body{ margin: 0;...height: 100%; } 垂直居中大致分为两类，父元素定宽高与父元素不定宽高，将两类样式以及子容器设定好 .set-parent,.dy-parent{ width...父元素定宽高 position+transform 原理与position+margin相同，CSS3的transform使得div向上平移自身高度的50%。 <!...父元素定宽高 position+calc css3提供calc函数，能够进行动态计算 css

1.8K3 0

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。...div垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用div css让这个登录布局水平和css垂直居中。这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。...top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #00F } /*css...注释：为了方便截图，对CSS代码进行换行*/ DIV水平居中和上下垂直居中css"> #Divbox { position:static; *position:relative; height:300px; width:500px

2.8K5 0

CSS flex样式垂直居中

文章目录文章参考问题描述 flex 个人理解对子元素影响作用自身的样式作用于子控件案例(水平垂直居中) 方法一（改变方向）方法二（让flex的子元素水平垂直居中）文章参考 Flex 布局教程...：语法篇问题描述由于div默认是没有高度的，如果设置了高度，默认是从左到右，从上到下的顺序来排布；如果要做垂直居中，就需要计算div控件的高度，如果内容变多或者变少，又会导致定位不准确，因此，最稳妥的办法就是让浏览器自己去根据...案例(水平垂直居中) 方法一（改变方向） <!...mycontainer{ height: 200px; width: 200px; border: 1px solid red; /* flex样式呈现*/ display: flex; /*垂直排列...，align-items就变为了水平方向上了，这点必须要注意方法二（让flex的子元素水平垂直居中） <!

1K1 0

CSS position &居中（水平，垂直）

css position是个很重要的知识点：知乎Header部分：知乎Header-inner部分： position属性值： fixed：生成绝对定位的元素，相对浏览器窗口进行定位（位置可通过：left...文本居中对齐（text-align:center;） 4.左右对齐：（①position:absolute;再设置left或right属性值②float:left;或者float:right）布局之垂直居中

4.7K9 0

Qt编写自定义控件64-垂直时间轴

一、前言垂直时间轴控件，主要用来描述企业发展历程大事件，或者软件版本迭代历史等，通过时间节点和事件描述来直观的展示发展的过程，一般在web网页或者app中经常看到此类控件，尤其是公司的官网关于公司部分...垂直时间轴控件主要存储的数据包含两个，一个是时间节点，一个是事件描述，为了后期的拓展性，采用结构体来存放这个数据，比如后期还可能增加该事件是否属于重大事件标记，是的话则绘制的时候突出显示比如加大字号加粗...自动产生滚动条 8:支持字符串形式设置数据三、效果图 [在这里插入图片描述] [在这里插入图片描述] 四、头文件代码 #ifndef TIMEAXIS_H #define TIMEAXIS_H /** * 垂直时间轴控件...lineColor; //线条颜色 QString title; //标题 QString infos; //信息集合 //时间轴主控件...infoPadding, -infoPadding, -infoPadding), Qt::AlignCenter, itemInfos.at(i).info); } //绘制垂直线对应的圆

1.4K2 0

Html+Css实现——时间轴日志

个人网站：【芒果个人日志】原文地址：Html+Css实现——时间轴日志 - 芒果个人日志 (wyz-math.cn) 作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主...文章概要：本篇文章，主要讲解一下如何创建一个精美的时间轴日志页面，其中代码里具体的日志内容部分需要自行更改哦！每日一言：宁可清贫自乐，不可浊富多忧。...目录页面效果图 HTML+CSS部分页面效果图时间日志.jpg HTML+CSS部分 <!

1.8K2 0

CSS实现水平|垂直居中漫谈

利用CSS进行元素的水平居中，比较简单，手到擒来：行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。...而撸起垂直居中，相信于大多初撸者来说，与我相似，内心是抗拒的。于此，以我司同事一内部分享为基，加以搜集完善，得8种CSS垂直居中书写之法；个中有示例Demo，以及代码和优劣之评。...CSS实现水平居中(3法) CSS实现垂直居中(8法) CSS文本垂直居中(5法)[Update: 2016-01-06] PS：窃以为，对于CSS足够熟悉的话，以CSS多种属性组合出的“奇技淫巧

1.2K9 0

Day14:CSS垂直居中

verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法，但是需要注意，vertical生效的前提是diaplay:inline-block...垂直居中的方法是给父元素display: flex;而子元素align-self:center; #out{ background: blue; width: 600px; height...垂直居中 #out{ background:blue; width: 600px; height: 300px; display: block; } #out:before{ content...垂直居中给父元素display:table,子元素display: table-cell的方式实现css垂直居中。...垂直居中 #out{ background: blue; width: 600px; height: 300px; } #hide{ width: 50%; height: 25%;

6412 0

CSS完成元素水平垂直居中

这样便可以实现元素在父容器里垂直居中显示了。...css"> .parent{ /*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/ width: 600px...css"> .parent{ /*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/ width: 600px...这样便实现了使用flex完成水平垂直居中的布局。...css"> .parent{ /*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/ width: 600px

1.3K1 0

css文字垂直居中方法

initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> learn vue 02 css

1.4K2 0

CSS水平垂直居中的方法

原文链接:http://caibaojian.com/370.html 水平垂直居中，特别是使用在列表的时候经常会用到的，以前有需求的时候我也做过类似的代码，是使用display:table-cell...第一种：相对定位法原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%; css"> .centerlist {position:relative...css"> .centerlist_inline-block{text-align: center; font-size:0; -letter-spacing:-1px...说完了水平居中，下面说垂直居中。如果元素是内联元素，并且只有一行，则我们可以通过line-height来设置与其高度同样大小，则实现了垂直居中了。如果未知元素高度，那就要用下面方法了！...下面这个的代码实现了水平垂直多行代码（支持一行）居中对齐。目前测试IE、chrome和Firefox均兼容。

2331 0

css样式—字体垂直、水平居中

这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素，但是被控制为内联元素的块元素是不行的)。一句话来说，就是要拥有块元素的特点的那些元素。...这个肯定是接触CSS一开始就知道的了。　　一般情况下，可以设置margin:0 auto;这会使这个块级元素在它的父级元素中居中，上下左右都会居中。　　...5 块级元素中的文字图片垂直居中(针对块的高度确定的，这个是从另一个博客上看到的，真的很实用哦，如果块内只有这些文字的话) 　　文字在层(块级元素)中垂直居中vertical-align 属性是做不到的...如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。　　...7 块级元素自身的垂直居中　　设置块级元素自身在父元素中的垂直居中，可以参照块级元素的水平居中的方法(上面说过)，设置外边距即可。如果不想设置水平居中，只要设置上下外边距为auto就好。

4.1K10 0

CSS——实现元素的垂直居中

在写CSS的过程中，我常常谷歌一个东西，就是如何实现元素的垂直居中，水平居中难度还不是很大，但是垂直居中我这个烂记性是写一次忘一次，于是本着好记性不如烂笔头的想法，写下一篇博客记录下来。...class="inner1"> 这里的子元素自适应，不设置高度那么来看css... 父亲设置了高度，且只有我一个子元素 css...div> #outter3.inner1 { display:flex; display: -webkit-flex; align-items:center; } 这就是三种CSS...里垂直居中的方法了，希望写下这篇文章的我，在遇到垂直居中的问题时，再也不用谷歌了。

1.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭