用HTML 和CSS 創(chuàng)建時間軸的關(guān)鍵在於結(jié)構(gòu)清晰、樣式合理。 1. 使用

或
搭建時間點結(jié)構(gòu)，每個時間點包含時間標(biāo)籤和內(nèi)容；2. 通過CSS 的偽元素::before 或::after 繪製時間軸線條和圓點標(biāo)記；3. 利用浮動或margin 實現(xiàn)事件內(nèi)容的左右交錯顯示；4. 添加過渡效果提升交互體驗，如懸停時放大時間點；5. 注意定位、間距及響應(yīng)式處理以確保佈局美觀與適配。掌握這些要點即可靈活構(gòu)建多種風(fēng)格的時間軸。



想用HTML 和CSS 創(chuàng)建一個時間軸？其實不難，關(guān)鍵在於結(jié)構(gòu)清晰、樣式合理。只要掌握基本的佈局和裝飾技巧，就能做出一個美觀又實用的時間線。



---

基本結(jié)構(gòu)：使用HTML 搭建時間點

時間軸的核心是有序排列的時間節(jié)點。你可以用無序列表<ul></ul>或者<div>來組織這些節(jié)點。每個時間點通常包含一個時間標(biāo)籤和對應(yīng)的內(nèi)容。<pre class='brush:php;toolbar:false;'> &lt;ul class=&quot;timeline&quot;&gt; &lt;li class=&quot;event&quot;&gt; &lt;div class=&quot;event-date&quot;&gt;2024年1月&lt;/div&gt; &lt;div class=&quot;event-content&quot;&gt;項目啟動&lt;/div&gt; &lt;/li&gt; &lt;li class=&quot;event&quot;&gt; &lt;div class=&quot;event-date&quot;&gt;2024年3月&lt;/div&gt; &lt;div class=&quot;event-content&quot;&gt;完成初版設(shè)計&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt;</pre><p>這樣寫的好處是結(jié)構(gòu)清晰，也方便後續(xù)用CSS 控製樣式。 </p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251948555766.jpeg" class="lazy" alt="How to create a timeline with HTML and CSS?" /><hr /><h3 id="樣式佈局-CSS-實現(xiàn)豎向時間軸線條">樣式佈局：CSS 實現(xiàn)豎向時間軸線條</h3><p>時間軸最常見的形式是縱向排列，中間一條線，左右或上下交替顯示事件內(nèi)容?？梢杂脗卧?lt;code>::before或::after來畫出這條線。

 .timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ccc;
}

.event {
  margin-bottom: 20px;
  position: relative;
}

.event::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 10px;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 2px solid #666;
  border-radius: 50%;
}

這段代碼會創(chuàng)建一個左側(cè)帶圓點標(biāo)記的時間軸線。你可以根據(jù)需要調(diào)整顏色、間距和形狀。



---

更好看的技巧：讓事件內(nèi)容錯落有致

為了讓視覺更豐富，可以考慮讓事件內(nèi)容左右交錯顯示。比如奇數(shù)項靠右，偶數(shù)項靠左，或者用浮動實現(xiàn)。

 .event-content {
  padding: 10px;
  background: #f0f0f0;
  border-radius: 5px;
  margin-left: 20px;
}

/* 偶數(shù)項靠左*/
.event:nth-child(even) .event-content {
  margin-left: auto;
  margin-right: 20px;
}

這樣做可以讓頁面看起來更有層次感，避免單調(diào)。

另外還可以加一點動畫效果，比如鼠標(biāo)懸停時放大時間點：

 .event::before {
  transition: transform 0.2s ease;
}

.event:hover::before {
  transform: scale(1.2);
}

---

基本上就這些。結(jié)構(gòu)簡單但細節(jié)需要注意，比如定位、間距、響應(yīng)式處理等。掌握了基礎(chǔ)，就可以自由發(fā)揮做各種風(fēng)格的時間軸了。