垂直时间线的纯CSS实现
步骤一：准备HTML结构
要实现纯CSS的垂直时间线，首先需要一个清晰的 HTML结构，包含一个外层容器和若干个时间节点。通过合理的 标签层次，可以让后续的样式工作更高效地进行。下面给出一个基础骨架，便于扩展。注意外层容器使用 timeline vertical 类名以区分不同方向的时间线。
<div class="timeline vertical"><div class="timeline-item"><div class="timeline-date">2020</div><div class="timeline-content"><p>项目启动与需求梳理完成。</p></div></div><div class="timeline-item"><div class="timeline-date">2021</div><div class="timeline-content"><p>设计阶段进入实现，界面风格初步成型。</p></div></div>
</div>在这个结构中，.timeline 负责容器级别的布局，.timeline-item 代表单个事件，.timeline-date 为时间点标签，.timeline-content 用于事件描述的内容区域。
步骤二：核心布局与样式
接下来使用纯CSS实现垂直排布和主轴线，核心思路是通过伪元素绘制纵向线条以及点标记，并让条目与线对齐。要点包括：flex布局或 grid 实现竖向排列，::before 绘制纵线，::after 或 ::before 绘制圆点。
/* 垂直时间线主结构样式示例 */
.timeline.vertical{position: relative;padding: 2rem 0;margin: 0;
}
.timeline.vertical::before{content: "";position: absolute;left: 20px;top: 0;bottom: 0;width: 2px;background: #cbd5e1;
}
.timeline-item{position: relative;padding-left: 60px;margin: 1rem 0;
}
.timeline-item::before{content: "";position: absolute;left: 11px;top: 0.8rem;width: 18px;height: 18px;border-radius: 50%;background: #fff;border: 3px solid #4c51bf;
}
.timeline-date{position: absolute;left: -120px;top: 0;width: 100px;text-align: right;font-weight: bold;color: #4c51bf;
}
.timeline-content{background: #fff;border: 1px solid #e2e8f0;padding: 0.75rem 1rem;border-radius: 6px;
}
@media (max-width: 600px){.timeline.vertical{padding-left: 0;}.timeline-item{padding-left: 0;}.timeline-date{position: static;text-align: left;margin-bottom: .25rem;left: auto;}.timeline.vertical::before{left: 8px;}
}
以上 CSS 通过 timeline.vertical 的伪元素实现纵向主轴线，.timeline-item::before 负责绘制时间点。这些视觉元素与实际内容容器实现了直观的对齐关系。
步骤三：节点样式与对齐
为每一个时间节点设置清晰的标记和内容分区能提升可读性。通过为每个条目设置 相对定位，并使用伪元素进行圆点绘制，可以实现对齐效果和视觉统一性。此外，标题与描述内容应当清晰分区，确保信息传达的层级感。
/* 节点对齐与内容区分的扩展示例 */
.timeline-item{ position: relative; padding-left: 70px;
}
.timeline-item .timeline-content{border-left: 3px solid #4c51bf;padding-left: 0.75rem;
}
.timeline-item .timeline-date{position: absolute;left: -110px;top: 0;
}
在实际应用中，可以将 .timeline-content 的边界样式改为柔和的阴影或淡色边框，以适应不同主题风格的设计需求。
步骤四：响应式与边距细节
为了在移动设备上仍然保持良好可读性，需对时间线的宽度、日期标签位置以及内容区的大小进行自适应调整。通过 @media 查询，可以在窄屏下将日期标签移回元素前方，缩短横向距离，使信息不易错位。
@media (max-width: 768px){.timeline.vertical{ padding-left: 0; }.timeline-item{ padding-left: 0; }.timeline-date{ left: auto; position: static; display: block; text-align: left; margin-bottom: .25rem; }
}
关键点：保持线条可读性、避免文本覆盖线条、并确保触控区域足够大以提升交互体验。
步骤五：完整可运行示例
以下给出一个完整、可直接运行的垂直时间线骨架，包含 HTML 与 CSS，便于你在项目中直接使用或进一步定制。请注意在实际部署中按需替换文本内容和颜色主题。
<div class="timeline vertical"><div class="timeline-item"><div class="timeline-date">2020</div><div class="timeline-content"><p>项目启动与需求梳理完成。</p></div></div><div class="timeline-item"><div class="timeline-date">2021</div><div class="timeline-content"><p>设计阶段进入实现，界面风格初步成型。</p></div></div>
</div>/* 将上面的完整结构结合示例样式 */
.timeline.vertical{ position: relative; padding: 2rem 0; }
.timeline.vertical::before{ content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #cbd5e1; }
.timeline-item{ position: relative; padding-left: 60px; margin: 1rem 0; }
.timeline-item::before{ content: ""; position: absolute; left: 11px; top: 0.8rem; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #4c51bf; }
.timeline-date{ position: absolute; left: -120px; top: 0; width: 100px; text-align: right; font-weight: bold; color: #4c51bf; }
.timeline-content{ background: #fff; border: 1px solid #e2e8f0; padding: 0.75rem 1rem; border-radius: 6px; }水平时间线的纯CSS实现
步骤一：HTML结构要点
若要实现水平排布的时间线，HTML 结构可与垂直时间线类似，但外层容器需要支持横向排列。核心目标是让 时间点沿主轴从左到右分布，并在每个条目中实现日期与内容的清晰分离。
以下结构可作为起点，使用 timeline horizontal 来标识水平方向，方便后续的样式覆盖与主题切换。
<div class="timeline horizontal"><div class="timeline-item"><div class="timeline-date">2020</div><div class="timeline-content"><p>需求确认与范围划定。</p></div></div><div class="timeline-item"><div class="timeline-date">2021</div><div class="timeline-content"><p>核心功能实现完成，进入测试阶段。</p></div></div>
</div>与垂直结构类似，水平结构的关键在于对主轴的控制与时间点的定位。
步骤二：横向布局与主轴线
水平时间线的核心是将条目沿水平方向排列，并绘制一条横向主轴线。通过 display:flex 与 flex-direction: row，实现从左到右的顺序，同时利用 ::before 绘制主轴线。
/* 水平时间线核心布局示例 */
.timeline.horizontal{display: flex;align-items: flex-start;gap: 2rem;padding: 2rem 0;position: relative;
}
.timeline.horizontal::before{content: "";position: absolute;top: 50px;left: 40px;right: 40px;height: 2px;background: #cbd5e1;
}
.timeline-item{ min-width: 240px; padding-top: 0; position: relative; text-align: center; }
.timeline-item::before{content: "";position: absolute;top: 42px;left: 50%;transform: translateX(-50%);width: 14px;height: 14px;border-radius: 50%;background: #fff;border: 3px solid #4c51bf;
}
.timeline-date{ font-weight: bold; color: #4c51bf; margin-bottom: .5rem; display:block; }
.timeline-content{ background: #fff; border: 1px solid #e2e8f0; padding: .75rem; border-radius:6px; }
@media (max-width: 800px){.timeline.horizontal{ flex-direction: column; align-items: stretch; }.timeline.horizontal::before{ top: auto; bottom: 0; height: 2px; left: 0; right: 0; }.timeline-item{ min-width: auto; padding: .75rem 0; }
}
要点是通过 flex 布局实现水平排列，并以 ::before 绘制水平主轴线。时间点的圆点会沿主轴对齐，形成清晰的视觉引导。
步骤三：节点标记与内容排布
水平时间线的节点标记通常置于主轴线上方或下方，确保时间点不遮挡文本内容。通过为 .timeline-item 设置合适的 min-width 和 对齐属性，可以在不同屏幕下保持一致的节奏感。
/* 节点标记与内容排布扩展示例 */
.timeline-item{ position: relative; padding-top: 1rem; }
.timeline-item::before{ top: 42px; }
.timeline-date{ display: block; margin-bottom: .5rem; font-weight: bold; color: #4c51bf; }
.timeline-content{ padding: .75rem; border: 1px solid #e2e8f0; border-radius: 6px; background:#fff; }
通过对 .timeline-content 的边框、圆角、背景色等进行微调，可以实现与整体站点风格的一致性，同时提高可读性。
步骤四：响应式适配
在移动设备上，水平时间线可能会超过视口宽度，因此需要在小屏幕下自动切换为垂直展示，或允许横向滚动。通过 @media 查询，可以实现这两种模式的平滑切换。
@media (max-width: 800px){.timeline.horizontal{ flex-direction: column; }.timeline.horizontal::before{ display: none; }
}
要点：确保滚动体验流畅，避免过度嵌套导致的触控卡顿，并在切换模式时保持信息的可读性。
步骤五：完整可运行示例
下面给出一个完整的水平时间线骨架，包含 HTML 与 CSS，便于直接在项目中使用或作为模板进一步定制。
<div class="timeline horizontal"><div class="timeline-item"><div class="timeline-date">2020</div><div class="timeline-content"><p>需求确认与范围划定。</p></div></div><div class="timeline-item"><div class="timeline-date">2021</div><div class="timeline-content"><p>核心功能实现完成，进入测试阶段。</p></div></div>
</div>/* 水平时间线完整样式（简化版） */
.timeline.horizontal{ display:flex; align-items:flex-start; gap:2rem; padding: 2rem 0; position: relative; }
.timeline.horizontal::before{ content:""; position: absolute; top: 50px; left: 40px; right: 40px; height: 2px; background:#cbd5e1; }
.timeline-item{ min-width: 240px; text-align: center; padding-top: 1rem; position: relative; }
.timeline-item::before{ content:""; position: absolute; top: 42px; left: 50%; transform: translateX(-50%); width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid #4c51bf; }
.timeline-date{ font-weight: bold; color:#4c51bf; margin-bottom:.5rem; display:block; }
.timeline-content{ background:#fff; border:1px solid #e2e8f0; padding:.75rem; border-radius:6px; }
@media (max-width: 800px){.timeline.horizontal{ flex-direction: column; }.timeline.horizontal::before{ display:none; }
}
