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

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



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



---

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

時間軸的核心是有序排列的時間節(jié)點。你可以用無序列表 <ul></ul> 或者 <div> 來組織這些節(jié)點。每個時間點通常包含一個時間標簽和對應(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)容。可以用偽元素 <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è)帶圓點標記的時間軸線。你可以根據(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)。

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

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

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

---

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