隨著HTML和CSS的不斷發(fā)展，CSS3時(shí)間看板成為了一個(gè)重要的設(shè)計(jì)元素。時(shí)間看板可以用于展示時(shí)間軸信息、事件流程等，非常適合在網(wǎng)站頭部或文章中使用。

.timeline {
position: relative;
padding: 50px 0;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 100%;
background: #ccc;
}
.timeline::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: #ccc;
}
.timeline-item {
position: relative;
margin: 50px 0;
padding: 50px;
border-radius: 10px;
background: #f7f7f7;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.timeline-item::before,
.timeline-item::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: #ccc;
}
.timeline-item::before {
left: -15px;
}
.timeline-item::after {
right: -15px;
}
.timeline-item:hover::before,
.timeline-item:hover::after {
background: #22b8cf;
}
.timeline-item h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.timeline-item p {
font-size: 16px;
line-height: 1.5;
}
.timeline-item.date {
position: absolute;
top: 0;
left: -100px;
padding: 10px;
border-radius: 5px;
background: #22b8cf;
color: #fff;
transform: rotate(-90deg);
}

上面是一個(gè)基本的CSS代碼，它包含一個(gè)時(shí)間軸和一個(gè)時(shí)間軸上的事件。對(duì)于時(shí)間軸，我們使用偽類:before和:after來(lái)制作。對(duì)于每個(gè)事件，我們使用一個(gè)div.timeline-item來(lái)表示，并使用.date類來(lái)標(biāo)記事件的日期。這個(gè)代碼只是一個(gè)基礎(chǔ)，您可以根據(jù)您的需求進(jìn)行調(diào)整和定制。