CSS時(shí)間軸是一種常見的網(wǎng)頁交互設(shè)計(jì)，它可以用來展示某些時(shí)間序列的事件，如個(gè)人履歷、歷史事件等。下面我們來看一下如何用CSS代碼實(shí)現(xiàn)一個(gè)時(shí)間軸。

/* 定義時(shí)間軸容器 */
.time-axis {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
/* 定義時(shí)間軸中每個(gè)事件的容器 */
.time-point {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 50px;
}
/* 定義時(shí)間軸中每個(gè)事件的時(shí)間 */
.time {
position: absolute;
right: -156px;
top: 0;
z-index: 1;
padding: 10px;
background: #333;
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 100%;
}
/* 定義時(shí)間軸中每個(gè)事件的內(nèi)容 */
.time-content {
padding-left: 50px;
}
/* 定義時(shí)間軸中每個(gè)事件的內(nèi)容的標(biāo)題 */
.time-title {
color: #333;
font-size: 24px;
font-weight: bold;
margin: 0;
}
/* 定義時(shí)間軸中每個(gè)事件的內(nèi)容的描述 */
.time-desc {
color: #666;
font-size: 18px;
margin-top: 10px;
}

上述代碼實(shí)現(xiàn)了時(shí)間軸容器的定義和每個(gè)事件的容器、時(shí)間、內(nèi)容、標(biāo)題、描述的定義。接下來只需要在HTML中按照這樣的結(jié)構(gòu)來實(shí)現(xiàn)時(shí)間軸的樣式。