css如何实现时间线

CSS可以通过定位和伪元素来实现时间线的效果。以下是一个简单的时间线示例：

HTML:

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>事件标题1</h3>
      <p>事件描述文本...</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-content">
      <h3>事件标题2</h3>
      <p>事件描述文本...</p>
    </div>
  </div>
  <!-- 更多事件项 -->
</div>

CSS:

.timeline {
  position: relative;
  padding: 20px 0 20px 50px;
  margin-left: 50px;
}
 
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  background: #fff;
  border-radius: 8px;
}
 
.timeline-item {
  position: relative;
  margin-bottom: 20px;
}
 
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: #1d81b6;
  border-radius: 50%;
  z-index: 1;
}
 
.timeline-content {
  margin-left: 60px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
.timeline-content h3 {
  margin-top: 0;
  color: #333;
}
 
.timeline-content p {
  margin-bottom: 0;
  color: #666;
}

这段代码创建了一个基本的时间线布局，.timeline 是外部容器，它使用了相对定位，并在左侧添加了一个伪元素来创建时间线的圆形标记。.timeline-item 是每个时间点的容器，它也使用了相对定位，并通过 .timeline-item::before 创建了时间点的圆点标记。.timeline-content 是时间点内容的容器，它使用了绝对定位，放置在时间点标记的右侧。