1、概述
用時間點來展示事件發生點來代替用table展示一條條數據，能夠給人清晰、一目了然能夠看清事情發生的過程，UI頁面也顯示的那么清晰。如何用css+html做出時間軸展示事件點的？先來看看下面的效果
做出這樣效果的時間軸展示事件點，需要了解一下知識：
1.1、css位置：position
1.2、css偽類：after,befault
1.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 脫離文檔流。也就是說：relative 的元素盡管表面上看到它偏離了原來的位置，但它實際上在文檔流中還是沒變。absolute的元素不僅位置改變了，同時也脫離了文檔流。
參考：css中的position: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選擇屬於其父元素第一個子元素。
參考：CSS 選擇器
3、示例demo下載[css代碼分析，自己領悟。。O(∩_∩)O哈哈~]