?

HTML

我們使用了HTML5標簽<section>，時間軸中所有的內容包括標題、簡介、時間和圖像都放在.cd-timeline- block的DIV中，多個DIV形成一個序列，并把這些DIV放在<section>中。注意要看到本例演示效果，需要你的瀏覽器支持 HTML5和CSS3。

          <section id="cd-timeline" class="cd-container"> 
    <div class="cd-timeline-block"> 
        <div class="cd-timeline-img cd-picture"> 
            <img src="img/cd-icon-picture.svg" alt="Picture"> 
        </div> 
 
        <div class="cd-timeline-content"> 
            <h2>HTML5+CSS3實現的響應式垂直時間軸</h2>             
            <p>網頁時間軸一般用于展示以時間為主線的事件，如企業網站常見的公司發展歷程等。本文將給大家介紹一款基于HTML5和CSS3的漂亮的垂直時間軸，它可以響應頁面布局，適用于HTML5開發的PC和移動手機WEB應用。</p> 
            <a  class="cd-read-more" target="_blank">閱讀全文</a> 
            <span class="cd-date">2015-01-06</span> 
        </div> 
    </div> 
    <div class="cd-timeline-block"> 
        ... 
    </div> 
     
</div> 
        

?

本例使用了svg圖像作為圖標，你也可以換成png，gif格式圖像。

?

CSS

我們使用:before偽類在時間軸#cd-timeline的前面創建一條垂直線，那么時間軸各個節點的內容都會基于這垂直線。

          #cd-timeline { 
  position: relative; 
  padding: 2em 0; 
  margin-top: 2em; 
  margin-bottom: 2em; 
} 
#cd-timeline::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 18px; 
  height: 100%; 
  width: 4px; 
  background: #d7e4ed; 
} 
        

?

好，接下來我們要做的是，根據用戶瀏覽器窗口的大小來調整時間軸的布局，當瀏覽器窗口非常大時，時間軸的各節點內容會分布在垂直線的兩邊（垂直線居 中），當瀏覽器窗口足夠小如手機，iPad中豎屏瀏覽時，時間軸的各節點內容會排列在垂直線的右邊（垂直線靠左），這個俗稱響應式布局。

          .cd-timeline-block { 
  position: relative; 
  margin: 2em 0; 
} 
.cd-timeline-block:after { 
  content: ""; 
  display: table; 
  clear: both; 
} 
.cd-timeline-block:first-child { 
  margin-top: 0; 
} 
.cd-timeline-block:last-child { 
  margin-bottom: 0; 
} 
@media only screen and (min-width: 1170px) { 
  .cd-timeline-block:nth-child(even) .cd-timeline-content { 
    float: right; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before { 
    top: 24px; 
    left: auto; 
    right: 100%; 
    border-color: transparent; 
    border-right-color: white; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { 
    float: right; 
  } 
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { 
    left: auto; 
    right: 122%; 
    text-align: right; 
  } 
} 
        

?

CSS3中可以使用@media判斷設備的屏幕尺寸，根據不同的尺寸執行不同的css樣式。本例中還用到了CSS3的陰影、圓角等效果，文中不再詳 述，大家可以參考網上好多關于CSS3的基礎教程，你也可以直接下載源碼包，本例的css全部整理在style.css文件中。當然你也可以在本例的基礎 上使用JS和CSS3來給時間軸增加一些過渡動畫，效果可能會更好。