豎時間軸是一種常見的頁面布局方式，以時間為軸，從上到下垂直排列，呈現(xiàn)出時間的流程與變化。在Web開發(fā)中，使用CSS可以實現(xiàn)豎時間軸的布局。本文將介紹如何使用CSS創(chuàng)建豎時間軸。

/*豎時間軸的HTML結(jié)構(gòu)*/
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h2>2020年5月5日</h2>
<p>這是一條時間軸的內(nèi)容，可以寫一些有意義的東西。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h2>2020年6月6日</h2>
<p>這是另一條時間軸的內(nèi)容。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h2>2020年7月7日</h2>
<p>這是第三條時間軸的內(nèi)容。</p>
</div>
</div>
</div>
/*豎時間軸的CSS樣式*/
.timeline {
position: relative;
padding: 20px 0;  /*上下間距*/
}
.timeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;  /*豎線的位置*/
width: 6px;  /*豎線的寬度*/
background-color: #999;  /*豎線的顏色*/
}
.timeline-item {
position: relative;
margin-bottom: 50px;  /*每個時間軸項目之間的間距*/
}
.timeline-dot {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;  /*圓點的寬度*/
height: 20px;  /*圓點的高度*/
border-radius: 50%;  /*圓點的圓角*/
background-color: #999;  /*圓點的顏色*/
}
.timeline-content {
position: absolute;
top: 30px;  /*文字的位置*/
right: -200px;  /*文字的偏移量*/
width: 200px;  /*文字的寬度*/
}
.timeline-content h2 {
margin-top: 0;
}
.timeline-content p {
margin-bottom: 0;
}

以上代碼中，我們使用了偽元素:before來繪制豎線，使用position屬性讓每個時間軸項目的圓點和文字相對定位，使用transform屬性將圓點水平居中。通過調(diào)整位置和間距等CSS樣式，可以實現(xiàn)不同樣式的豎時間軸布局。我們也可以使用JavaScript等技術(shù)實現(xiàn)更復(fù)雜的時間軸交互效果。