编写水平时间轴的样式可以使用HTML和CSS来实现。下面是一个简单的示例代码:
HTML代码:
2022-01-01
事件1
2022-02-01
事件2
2022-03-01
事件3
CSS代码:
.timeline {
position: relative;
margin: 20px 0;
}
.timeline-item {
position: relative;
padding: 20px;
border-bottom: 1px solid #ccc;
}
.timeline-date {
font-weight: bold;
margin-bottom: 10px;
}
.timeline-content {
margin-left: 50px;
}
.timeline-item:before {
content: "";
position: absolute;
top: 0;
left: 25px;
width: 2px;
height: 100%;
background-color: #ccc;
}
.timeline-item:first-child:before {
top: 20px;
}
.timeline-item:last-child:before {
height: calc(100% - 20px);
}
.timeline-item:after {
content: "";
position: absolute;
top: 10px;
left: 18px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
border: 2px solid #fff;
}
.timeline-item:last-child:after {
top: calc(100% - 20px);
}
这段代码创建了一个简单的水平时间轴。每个时间轴项包含一个日期和内容。使用CSS的伪类选择器和绝对定位来创建时间轴的线条和圆点。可以根据需要修改样式,如颜色、字体大小等。