纯html+css可构建清晰响应式roadmap页：用语义化时间轴，标记日期，css计数器控制序号，position:sticky实现季度标题悬浮（需规避safari flex/grid兼容性），data-status属性管理状态标签，hsl配色便于主题维护。

纯 HTML + CSS 就能做出清晰、可维护、适配响应式的 Roadmap 页面，不需要框架或 JS 渲染——关键在于语义化结构 + 时间轴布局 + 状态标记逻辑。

用 <ol></ol> 做时间轴，别用 <div> 堆砌 <p>产品路线图本质是有序的时间序列，<code><ol></ol> 不仅语义正确，还能天然支持序号、无障碍阅读和 CSS 计数器。用 <div> 或 <code><ul></ul> 反而要手动加序号、处理焦点顺序、补 ARIA 属性。

• 每个里程碑用 <li> 包裹，内部用 <time></time> 标记日期（如 <time datetime="2025-06">Q2 2025</time>），利于 SEO 和屏幕阅读器
• 避免在 <li> 里塞多层嵌套 <div>；把样式交给 CSS 的伪元素（如 <code>::before）画时间点、连接线
• 不要给 <ol></ol> 设 list-style: none 后完全丢弃序号——保留它，用 counter-reset/counter-increment 控制显示逻辑更稳妥

position: sticky 实现季度标题悬浮，但得防住 Safari 兼容性坑

当路线图按季度/半年分组时，让 <h3 class="quarter">Q3 2025</h3> 在滚动时悬停在顶部，比 JS 监听 scroll 轻量得多。但 Safari 对 sticky 在 flex/grid 容器里的支持不一致。


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• 确保父容器不是 display: flex 或 display: grid，改用 display: block；否则 Safari 下 sticky 失效
• 给 .quarter 加 top: 1rem（不能为 0）+ z-index: 10，避免被后续内容遮盖
• 如果必须用 flex 布局，退而求其次：用 position: relative + transform: translateY() 模拟，配合 IntersectionObserver 切换 class（仅在必要时）

状态标签用 data-status + CSS 层叠，别写死 class 名

“Planned”、“In Progress”、“Shipped”、“Canceled” 这些状态会变，硬编码 class="status-shipped" 会导致 HTML 和 CSS 强耦合，改一个状态就得同步动两边。

• 统一用 data-status="shipped" 属性，CSS 写成 [data-status="shipped"]::after { content: "✓ Shipped"; }
• 颜色用 HSL 而非 HEX，比如 color: hsl(120, 70%, 45%)，后续调色板变更时只需改 CSS 变量，不用碰 HTML
• 禁用 data-status="done" 这类模糊值——统一用后端返回的枚举值（如 "completed"），避免前后端状态映射错位

真正难的不是画出漂亮的时间线，而是让每个 <li> 能独立承载版本号、负责人、关联 issue 链接、完成度百分比这些信息，同时保持 DOM 平坦、CSS 可预测。多一层 wrapper，就多一分维护成本。