入门 CSS 时间线目标 TimelineItem

1. 什么是 TimelineItem？

TimelineItem 是一种用于创建时间线的 CSS 元素。它主要包括时间、标题、内容等等，可用于展示一些历史事件，或公司发展历程等等，增强页面的互动性和吸引力。

2. 创建 TimelineItem 的步骤

2.1 编写 HTML 结构

首先，我们需要编写 TimelineItem 的 HTML 结构。一般来说，一个 TimelineItem 最少由三个元素组成：

<div class="timeline-item">
  <div class="timeline-item__time">2021-06-01</div>
  <div class="timeline-item__title">标题</div>
  <div class="timeline-item__content">
    内容
  </div>
</div>

其中，.timeline-item 是 TimelineItem 的容器元素，.timeline-item__time、.timeline-item__title、.timeline-item__content 则分别表示时间、标题、内容元素。我们可以通过这些元素来设置 TimelineItem 的样式和布局。

2.2 添加样式文件

接下来，我们需要添加样式文件。这里我用 Sass 来编写样式。我们可以新建一个 _timeline.scss 文件，在其中编写 TimelineItem 的样式：

// timeline-item 样式

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding: 0 20px;

  &:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #666;
  }
}

.timeline-item__time {
  padding: 5px;
  font-size: 14px;
}

.timeline-item__title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
}

.timeline-item__content {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 10px;
}

这里，我们为 .timeline-item 元素添加了 position: relative，表示该元素是相对定位的；为 .timeline-item:after 伪元素添加了样式，来创建时间轴上的圆点；为 .timeline-item__time、.timeline-item__title、.timeline-item__content 分别设置了字号、行高、边距等样式。

2.3 在页面中使用 TimelineItem

最后，我们需要在我们的页面中使用 TimelineItem。可以将所有 TimelineItem 放入一个 .timeline 容器中：

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-item__time">2021-06-01</div>
    <div class="timeline-item__title">标题</div>
    <div class="timeline-item__content">
      内容
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item__time">2021-06-02</div>
    <div class="timeline-item__title">标题</div>
    <div class="timeline-item__content">
      内容
    </div>
  </div>
  ...
</div>

最后，只需要在页面中引入样式文件，即可完成 TimelineItem 的创建：

<link rel="stylesheet" href="timeline.css">

3. 总结

通过上述步骤，我们可以轻松地创建出一个简单的 TimelineItem。当然，如果我们需要更加复杂的样式，我们还可以通过添加 class 名称，来修改该元素的样式。希望这篇文章能够帮助大家更好地使用 TimelineItem。