css垂直时间轴
时间: 2023-07-05 19:24:28 浏览: 65
您可以使用CSS中的flexbox属性来创建垂直时间轴。以下是一个简单的示例代码:
HTML代码:
```
<div class="timeline">
<div class="timeline-item">
<div class="timeline-item-date">2021年6月</div>
<div class="timeline-item-content">这是第一个事件</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">2021年7月</div>
<div class="timeline-item-content">这是第二个事件</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">2021年8月</div>
<div class="timeline-item-content">这是第三个事件</div>
</div>
</div>
```
CSS代码:
```
.timeline {
display: flex;
flex-direction: column;
}
.timeline-item {
display: flex;
align-items: center;
margin-bottom: 50px;
}
.timeline-item-date {
font-weight: bold;
margin-right: 20px;
}
.timeline-item-content {
border: 1px solid black;
padding: 20px;
background-color: #F0F0F0;
}
```
以上代码将创建一个简单的垂直时间轴,其中每个事件都有一个日期和内容。您可以自定义CSS样式以满足您的具体需求。
相关推荐
![](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)