入门 CSS 时间线 TimelineItem-Condensed

在网站开发过程中，展示时间线是一个常见的需求。而在展示时间线的时候，TimelineItem-Condensed是一个常用的样式。

什么是TimelineItem-Condensed

TimelineItem-Condensed是时间线中的一种样式，它的特点是占用空间小，内容简洁。在紧凑的页面中，使用这种样式可以有效的展示时间轴上的信息。

如何使用TimelineItem-Condensed

在CSS中，使用TimelineItem-Condensed样式，需要定义对应的CSS代码。

.timeline-item-condensed {
  margin: 5px 0;
  position: relative;
  display: flex;
  align-items: center;
}
.timeline-item-condensed:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  position: relative;
  left: -5px;
  top: 0;
}
.timeline-item-condensed.has-timeline-icon:before {
  left: 0;
}
.timeline-item-condensed .timeline-item-content {
  margin-left: 20px;
}
.timeline-item-condensed .timeline-item-content h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.timeline-item-condensed .timeline-item-content p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}
.timeline-item-condensed.right-align .timeline-item-content {
  margin-left: 0;
  margin-right: 20px;
  text-align: right;
}

在html中，应用TimelineItem-Condensed样式需要使用对应的类名。

<div class="timeline-item-condensed">
  <div class="timeline-item-content">
    <h4>2021年3月18日</h4>
    <p>学习CSS样式</p>
  </div>
</div>

使用注意事项

1. 时间线需要准确无误，不仅仅是时间，展示信息也需要准确无误。
2. 不要过度使用时间线，只在必要的时候使用时间线，可以有效的提升页面的可读性。
3. 在展示时间线的时候，可以根据需求选择不同的样式，比如TimelineItem-Condensed和TimelineItem-Expanded。

总结

使用TimelineItem-Condensed样式可以有效的展示时间轴上的信息，它的特点是占用空间小，内容简洁。在展示信息比较紧凑的页面中，可以考虑使用这种样式。