HTML5和CSS的結合可以為我們提供優秀的用戶界面和交互效果，其中時間軸就是其中一個很好的例子。時間軸可以幫助我們展示過去、現在和未來的事件，讓用戶更加清晰地了解時間的流逝和事件的發生。在本篇文章中，我們將介紹如何用HTML5和CSS創建一個簡單的時間軸。 首先，我們需要在HTML文件中創建時間軸的基本結構。下面是一個示例代碼：

<div id="timeline">
<div class="entry">
<div class="title">2000</div>
<div class="body">事件1</div>
</div>
<div class="entry">
<div class="title">2010</div>
<div class="body">事件2</div>
</div>
<div class="entry">
<div class="title">2020</div>
<div class="body">事件3</div>
</div>
</div>

上述代碼中，我們定義了一個id為“timeline”的div，這是整個時間軸的容器。在該容器內部，我們創建了三個entry div，每個entry代表一個時間節點，它包含了一個標題和一個正文。標題和正文的內容將會根據需求填充。 接下來，我們需要用CSS來樣式化我們的時間軸。下面是一些簡單的CSS代碼，可以幫助我們實現最基本的效果：

#timeline {
width: 400px;
margin: 50px auto;
}
.entry {
position: relative;
margin-bottom: 40px;
padding-left: 20px;
}
.entry:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
border-left: 4px solid #333;
}
.title {
font-weight: bold;
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.body {
font-size: 16px;
color: #666;
line-height: 1.5;
}

上述代碼中，我們定義了#timeline div的寬度和居中，使其在頁面上看起來更協調。我們還將每個entry div的位置設置為相對，這會使我們稍后創建的偽元素（pseudo-element）能夠在每個entry div的左側畫一條粗線，模仿了時間軸的外觀。 接下來，我們為entry div的標題和正文設置了合適的樣式，以使其在頁面上清晰易讀。最后，我們用偽元素為每個entry div畫了時間軸中結點之間的橫向粗線。 最終的時間軸看起來應該是這樣的：  在開發中，我們可以使用自定義CSS來改變時間軸的樣式以適應我們的設計需求。無論如何，通過HTML5和CSS創建時間軸的過程非常簡單，僅需要基本的HTML和CSS知識就可以完成。