CSS中添加時間軸 在網頁中，時間軸是一種常見的元素，可以用來展示某一事件或時間范圍內的進程。在CSS中，我們可以使用一些技巧來創建一個簡單的時間軸。 首先，在HTML中，我們可以定義時間軸的容器。使用一個簡單的div元素就可以做到：

<div class="timeline"></div>

在CSS中，我們可以定義該容器的寬度、高度、背景色等屬性。

.timeline {
width: 800px;
height: 400px;
background-color: #f7f7f7;
}

然后，我們可以使用CSS中的position屬性將時間軸的子元素定位到可視框中。我們可以使用div元素來表示每個事件，然后將其放置在容器的左半邊或右半邊。

.event {
position: absolute;
top: 50%;
width: 50%;
transform: translate(0, -50%);
}
.event-left {
left: 0;
}
.event-right {
right: 0;
}

在這個例子中，我們將每個事件的寬度設置為容器寬度的一半，然后使用transform屬性將其水平居中和垂直居中。我們使用position屬性將其定位到容器的左半邊或右半邊。 最后，我們可以使用圖像或其他方式來將事件變成更有趣的元素。我們可以在每個事件的容器中添加圖像、標題和描述等信息。

<div class="event event-left">
<img src="image-1.jpg">
<h2>Event 1</h2>
<p>Description of Event 1</p>
</div>

通過這樣的方式，我們可以在CSS中輕松創建一個簡單的時間軸。我們可以使用CSS來定制它，使它適合不同的主題和風格。