水平时间轴html实现
时间: 2023-11-10 10:05:29 浏览: 53
下面是一个简单的 HTML 时间轴示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>时间轴</title>
<style>
.timeline {
position: relative;
padding: 50px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: #ccc;
transform: translateX(-50%);
}
.timeline__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 50px 0;
max-width: 400px;
text-align: center;
}
.timeline__item::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
transform: translate(-50%, -50%);
}
.timeline__item--left::before {
left: auto;
right: 50%;
}
.timeline__item__title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.timeline__item__date {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.timeline__item__description {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="timeline">
<div class="timeline__item timeline__item--left">
<div class="timeline__item__title">事件 A</div>
<div class="timeline__item__date">2021年1月1日</div>
<div class="timeline__item__description">事件 A 的描述</div>
</div>
<div class="timeline__item">
<div class="timeline__item__title">事件 B</div>
<div class="timeline__item__date">2021年2月1日</div>
<div class="timeline__item__description">事件 B 的描述</div>
</div>
<div class="timeline__item timeline__item--left">
<div class="timeline__item__title">事件 C</div>
<div class="timeline__item__date">2021年3月1日</div>
<div class="timeline__item__description">事件 C 的描述</div>
</div>
<div class="timeline__item">
<div class="timeline__item__title">事件 D</div>
<div class="timeline__item__date">2021年4月1日</div>
<div class="timeline__item__description">事件 D 的描述</div>
</div>
</div>
</body>
</html>
```
这个示例使用了 flexbox 布局和伪元素来实现时间轴的效果。时间轴的主体是一个具有 `position: relative;` 属性的容器,它包含了每个事件的容器。每个事件容器都是一个 `display: flex;` 元素,它包含事件的标题、日期和描述。每个事件容器的伪元素是一个圆点,它位于容器的顶部中心。伪元素的位置是使用 `position: absolute;` 和 `transform` 属性来实现的。时间轴的竖线是一个具有 `position: absolute;` 属性的伪元素,它位于时间轴容器的中心,使用 `left: 50%;` 和 `transform: translateX(-50%);` 来实现。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)