html纵向有刻度时间轴,科技常识：html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果...

今天小编跟大家讲解下有关html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果 的相关资料，希望小伙伴们看了有所帮助。

1、概述

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

做出这样效果的时间轴展示事件点 需要了解一下知识：1、css位置：position2、css伪类：after,befault3、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 脱离文档流。也就是说：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选择属于其父元素第一个子元素。

3、示例demo点击下载Demo

转载来源：http://www.cnblogs.com/xibei666/p/5106465.html

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。

标签：