时间轴应优先用 <ol>，因其语义准确、利于无障碍和SEO；若用 <ul>，须清除列表样式并确保DOM顺序与时间顺序一致。
时间轴该用 <ol> 还是 <ul>？
语义上 <ol> 更准确——时间轴天然有序，<ol> 明确表达事件先后关系，对屏幕阅读器和 SEO 更友好。但实际开发中很多人选 <ul>，只因默认序号干扰样式。这没问题，前提是：用 CSS 清掉 list-style，并确保 DOM 顺序与时间顺序严格一致（不能靠 flex-direction: row-reverse 或 order 颠倒视觉顺序）。否则，键盘导航或读屏时会跳错节点。
垂直时间轴的 CSS 骨架怎么搭才稳？
别用 position: absolute 画主线——父容器漏设 position: relative、高度写死、响应式下偏移失效，全是高发翻车点。推荐用伪元素 + Flex 布局：
-
.timeline设display: flex; flex-direction: column;，不设固定高度 - 用
.timeline::before绘制中线：left: 50%; transform: translateX(-50%)，避免像素偏移 - 每个
.timeline-item用display: flex控制左右内容分布，不用float - 时间标记用
<time datetime="2024-03-15">2024年3月</time>，既语义清晰又便于 JS 解析
移动端为什么总出现横向滚动条？
根本不是“线没缩好”，而是水平方向内容超宽。典型诱因有：
- 给
.timeline设了min-width或固定width -
.timeline-item内部用了white-space: nowrap且未断行 - 左右两侧内容块加起来宽度 > 100%，比如都设
width: 50%还带padding
解法很简单：小屏下切为单列堆叠。媒体查询里重置关键样式：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.timeline::before {
left: 0;
transform: none;
width: 100%;
height: 2px;
}
.timeline-item {
flex-direction: column;
}
.timeline-time,
.timeline-content {
width: 100%;
text-align: center;
}
}
交互增强要不要加 JavaScript？
静态时间轴够用就别加。真要加，优先用 IntersectionObserver 替代 scroll 事件监听——它性能更好、不卡顿，且原生支持懒加载和滚动触发动效。例如让条目进入视口时淡入：
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.timeline-item').forEach(el => observer.observe(el));
注意：如果时间轴内容动态插入（比如 AJAX 加载），得在新节点插入后显式调用 observer.observe()，这点容易漏。
