用CSS實現時間軸總結

總結：大致而言是用ul結構實現，每一個li元素設定一個before僞元素，做爲時間軸上的圓球，在每個li元素中新建一個div元素做爲時間軸的內容。每個div結構中設定一個after僞元素，用來做爲指向時間軸的箭頭。因爲內容會分散在時間軸的兩旁，故還應該根據nth-child()來進行相應的設置。

內容原創爲此網站，我只是總結一下我這個過程。

HTML結構

<div class="timeline">
    <ul>
        <li>
            <div>
                 2002 
                 2002
            </div>
        </li>
        <li>
            <div>
                2005
            </div>
        </li>
    </ul>
</div>

CSS樣式 - 時間軸

首先將每個li元素壓縮，設置背景色，使其成爲時間軸的主軸，並使其居中。將其position設爲relative，方便子元素根據中軸線進行變更。

.timeline ul li {
    background-color: white;
    width: 6px;
    margin: 0 auto;
    padding: 50px;
    position: relative;
}

而後用僞元素選擇器after選中li以後的內容，並使其變形爲圓形。

.timeline ul li:after {
    content:""; /*不重要*/
    border-radius: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 30px;
    height: 30px;
    background-color: red;
}

這樣時間軸上面的一個個時間點球就完成了，（請忽略我設定的顏色，徹底爲了看上去比較方便）

CSS樣式 - 內容框

在每個li元素中還有一個div元素，做爲時間軸的內容部分。

.timeline li div{
    position: relative; /*位置會在以後設置*/
    bottom: 0px;
    width: 400px;
    padding: 15px;
    background-color: yellow;
}

以後用僞元素before設立一個指向時間軸的箭頭，在這個部分還只是一個小點，具體的形狀會在以後設置。

.timeline li div::before {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style:solid;
}

CSS樣式 - 內容框設置左右

根據內容框的排列將內容框依次排在時間軸的左右。

.timeline li:nth-child(odd) div {
    left: 45px;
}

.timeline li:nth-child(odd) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent red transparent transparent transparent;
}

.timeline li:nth-child(even) div {
    left: -468px;
    border-width: 8px 0px 8px 16px;
    border-color: transparent transparent transparent red;
}

右邊框位置的計算過程大體以下：
width(400) + padding(30) + li-width(6) + 時間軸球半徑(15) + 箭頭(15) + 空餘部分

總結

以前也作過期間軸的，經過設置一個right部分float到右邊，而後用border-left做爲中間軸，可是沒有這個這麼好，這個方法還運用了兩個我以前並不知道的僞元素before和after，也算學習到了不少。原文還有使用javascript進行交互的內容，因爲個人時間軸實在是的過短了，就沒有添加了，若是有興趣能夠點擊原文查看。