請給一個html時間線的代碼範例
时间: 2023-10-21 20:21:45 浏览: 18
當然可以!以下是一個簡單的 HTML 時間線代碼範例:
```html
<!DOCTYPE html>
<html>
<head>
<title>時間線</title>
<style>
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 2px;
background-color: #ccc;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.timeline-item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20px;
}
.timeline-item::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: #ccc;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.timeline-content {
margin-left: 30px;
}
.timeline-date {
font-weight: bold;
}
.timeline-description {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2022-01-01</div>
<div class="timeline-description">事件描述1</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2022-02-15</div>
<div class="timeline-description">事件描述2</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2022-03-20</div>
<div class="timeline-description">事件描述3</div>
</div>
</div>
</div>
</body>
</html>
```
這個代碼創建了一個簡單的時間線,每個事件都有日期和描述。你可以根據自己的需要添加更多的事件,調整樣式等。希望這可以幫助到你!