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

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



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



---

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

時(shí)間軸的核心是有序排列的時(shí)間節(jié)點(diǎn)。你可以用無序列表<ul></ul>或者<div>來組織這些節(jié)點(diǎn)。每個(gè)時(shí)間點(diǎn)通常包含一個(gè)時(shí)間標(biāo)籤和對(duì)應(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;項(xiàng)目啟動(dòng)&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è)計(jì)&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-實(shí)現(xiàn)豎向時(shí)間軸線條">樣式佈局：CSS 實(shí)現(xiàn)豎向時(shí)間軸線條</h3><p>時(shí)間軸最常見的形式是縱向排列，中間一條線，左右或上下交替顯示事件內(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%;
}

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



---

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

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

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

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

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

另外還可以加一點(diǎn)動(dòng)畫效果，比如鼠標(biāo)懸停時(shí)放大時(shí)間點(diǎn)：

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

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

---

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