css 竖行进度图_html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

1、概述

html实现用时间点来展示事件发生点来代替用table展示一条条数据，能够给人清晰、一目了然能够看清事情发生的过程，UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的？先来看看下面的效果：

做出这样效果的时间轴展示事件点，需要了解一下知识：

1、css位置：position

2、css伪类：after,befault

3、css内容：content

2、CSS中Postion

语法：

position : static | absolute | fixed | relative

取值：

static :默认值。无特殊定位，对象遵循HTML定位规则

absolute :将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义

fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

position默认是static ，absolute是相对父元素来绝对定位的，relative是相对自己来定位。relative 不脱离文档流，absolute 脱离文档流。也就是说