html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

站长手记 作者: 2024-08-28 12:40:01
html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

1、概述

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 等属性在正常文档流中偏移位置

2、CSS中伪类和content

a:after{
  content: " (" attr(href) ")";
}

3、示例demo

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70126.html
html 时间轴 纯css