html纵向时间轴代码
时间: 2023-11-09 13:08:54 浏览: 45
HTML纵向时间轴的代码可以参考以下示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>纵向时光轴</title>
<style>
/* 样式 */
.jazz-timeline-wrapper {
padding: 20px;
background-color: #f5f5f5;
}
.jazz-timeline {
position: relative;
}
.timeline__item {
position: relative;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.timeline__item-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.timeline__item-content {
margin-left: 100px;
padding-left: 20px;
}
/* 样式结束 */
</style>
</head>
<body>
<div class="jazz-timeline-wrapper">
<div class="jazz-timeline">
<div class="timeline__item">
<div class="timeline__item-bg"></div>
<div class="timeline__item-content">
<h3>时间点标题1</h3>
<p>时间点1的内容</p>
</div>
</div>
<div class="timeline__item">
<div class="timeline__item-bg"></div>
<div class="timeline__item-content">
<h3>时间点标题2</h3>
<p>时间点2的内容</p>
</div>
</div>
<!-- 其他时间点 -->
</div>
</div>
</body>
</html>
```
在上述代码中,可以使用`.jazz-timeline-wrapper`包裹整个时间轴,`.jazz-timeline`作为时间轴的容器。每个时间点使用`.timeline__item`来定义,并在其中添加`.timeline__item-bg`和`.timeline__item-content`来设置背景和内容。根据需要可以添加更多时间点,并在`.timeline__item-content`中自定义标题和内容。可以根据需求进行样式修改,例如改变颜色、添加单边时间轴等。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>