[分享]css3彩色响应式垂直时间轴

CSS3彩色响应式垂直时间轴是一种实现在网页中展示时间线信息的方法，它可以使信息更加有条理和美观。/ HTML结构 / 2019年3月23日 标题一 内容一 2019年4月15日 标题二...

CSS3彩色响应式垂直时间轴是一种实现在网页中展示时间线信息的方法，它可以使信息更加有条理和美观。

/* HTML结构 */
<div class="timeline">
    <div class="item">
        <div class="time">2019年3月23日</div>
        <div class="content">
            <h3>标题一</h3>
            <p>内容一</p>
        </div>
    </div>
    <div class="item">
        <div class="time">2019年4月15日</div>
        <div class="content">
            <h3>标题二</h3>
            <p>内容二</p>
        </div>
    </div>
    <div class="item">
        <div class="time">2019年6月6日</div>
        <div class="content">
            <h3>标题三</h3>
            <p>内容三</p>
        </div>
    </div>
</div>

/* CSS样式 */
.timeline {
    position: relative;
    margin: 0;
    padding: 0;
}
.item {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    padding-left: 50px;
}
.item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    width: 5px;
    height: 100%;
    background: #0088ff;
}
.time {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #0088ff;
}
.content {
    padding: 0 0 0 20px;
}
h3 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: #444;
}
p {
    margin: 10px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #777;
} 

代码中，首先是HTML结构，我们通过一个

元素包裹了一些具体信息，比如时间、标题、内容等。

然后通过CSS样式，实现了一个响应式的垂直时间轴。每一个item类对应一个事件信息，在这个元素中，使用:before来设置一条竖线，并且设置时间元素的样式。而在.content类中，设置标题和内容的样式。

最终，使用这样的CSS时间轴可以使网站更加美观大方，同时能够使得网站中的信息更加清晰有序地展现出来。