html怎么做一条轴,html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

1、概述

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

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

1、css位置：position

2、css伪类：after,befault

3、css内容：content

办公资源网址导航

https://www.wode007.com

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 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。

2、CSS中伪类和content

css中的伪类 :after,:befault,:first-child,:last-child

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

举例：(在a内容后面插入a的链接)

a:after{

content: " (" attr(href) ")";

}

:after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。

:befault选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容

:last-child选择属于其父元素最后一个子元素。

:first-child选择属于其父元素第一个子元素。

原文链接：https://www.cnblogs.com/ypppt/p/13111051.html

本文来自网络，不代表手讯网立场。

html怎么做一条轴,html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果相关推荐

html怎么做响应式表格,纯CSS实现响应式表格
自从转岗至腾讯云后,项目中接触到大量的数据表格.多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理.本文介绍一种使用纯CSS实现响应式表格的方法. 通常表格中的一行代表一条项目,每列代 ...
怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
组态王怎么做进度条_三种方法制作进度条效果
进度条可以说出现在我们生活的方方面面,游戏.视频加载会碰到它,刷新会碰到它,就连网络不顺畅时也会碰到它.进度条不仅仅只是作为信息载入时的标志,还可以运用到片头开场,让观众对接下来的视频内容产生好奇和期 ...
mysql 生成时间轴,MYSQL 时间轴数据获取同一天数据的前3条
创建表数据 CREATE TABLE `praise_info` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'ID', `pic_id` va ...
mysql往前一天同一时间_Mysql时间轴数据获取同一天数据的前三条
创建表数据 CREATE TABLE `praise_info` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'ID', `pic_id` va ...
web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...
php怎么创建两条折线图,excel折线图怎么做两条
excel折线图怎么做两条? 1.随便编两组数据,这两组数据横坐标的值以及数量都不相同,要求将这两组数据做成一张折线图. 2.首先选中第一组数据,点击插入--散点图--选择带直线和数据标记的散点图(就 ...

html怎么做一条轴,html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html怎么做一条轴,html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果相关推荐

最新文章

热门文章