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定位规则
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选择属于其⽗元素第⼀个⼦元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。