单文件 HTML Slide 制作经验总结¶

日期： 2026-05-21 来源： THS 智能路由项目进度汇报 slide 制作复盘 模板： 单html毕设slide（1600×900 画布 + CSS 动画 + 键鼠导航）

核心架构¶

单文件自包含 HTML，CSS + HTML + JS 全在一个文件里
固定 1600×900px 画布（16:9），transform:scale() 自适应缩放
多页 PPT：div.slide#pN + .active 类切换
动画系统：CSS transition + JS async/await + 代际令牌防抖
导航：方向键/空格/回车翻页，R 重播动画，点击下一页

踩坑与教训¶

问题 1：内容撑爆固定画布¶

现象：P6「五大功能」5 个 .row 竖排，总高度超出 900px，页脚被顶出与内容重叠。根因：固定画布不响应式，5 行全宽列表竖排过高。解决：改用 .grid.g2 2 列布局，奇数末项 grid-column:1 / -1 跨整行。

铁律： - 画布可用高度 ≈ 708px（900 - 74 - 78 - 40） - 单个 .row 卡片高度 ≈ 70-80px - 5+ 项列表必须排 2 列，6+ 项考虑分页或 3 列

问题 2：受众中途变更¶

现象：从「给算法组对齐」改为「给领导汇报」，两类受众关注点完全不同。解决：不覆盖原文件，新建独立 html： - 技术版（13-15 页）：接口字段、实现细节、测试覆盖 - 领导版（8-10 页）：结论、进度、风险、时间线

问题 3：术语对非技术读者不友好¶

现象：AI 生成的内容用了很多专业英语缩写，读者看不懂。解决：括号解释法 —— 保留英文原名 + 解释性括号：

✅ pre_routing_hook（LiteLLM 预留的扩展点，请求分发前会调到这里）
❌ pre_routing_hook（纯术语，读者不懂）
❌ 预路由钩子（纯翻译，读者也不懂）

设计经验¶

排版布局¶

项数	推荐布局
1-3 项	单列居中或 3 列 grid
4 项	2×2 grid
5 项	2 列 grid，末项跨整行
6+ 项	分页或 3 列 grid

动画节奏¶

商务/领导汇报：克制，只用 fade-in + 上移，不用炫酷特效
技术分享/答辩：可适度用扫描线、辉光等效果
.anim 类统一管理入场，data-delay 控制延迟

亮色 Claude 风配色（已验证好用）¶

:root {
  --bg: #FAF9F5;          /* 米白底 */
  --card: #FFFFFF;         /* 纯白卡片 */
  --ink: #2A2724;          /* 暖黑字 */
  --ink2: #6E6A60;         /* 次要字 */
  --ink3: #9C978A;         /* 弱化字 */
  --accent: #D97757;       /* 珊瑚橙 */
  --accent-d: #BE5F40;     /* 深橙 */
  --accent-soft: #F3E3DA;  /* 浅橙底 */
  --line: #E5E2D7;         /* 描边 */
  --ok: #5C8A6A;           /* 绿色 */
  --ok-soft: #E7F0E9;      /* 浅绿底 */
  --warn: #C99A3C;         /* 琥珀 */
}

工作流总结¶

确认受众：技术对齐 / 领导汇报 / 答辩评审 → 决定详略和措辞
规划页面：根据内容量预估页数，注意每页内容高度不要撑爆 900px
排版铁律：5+ 项列表排 2 列，预估可用高度 ≈ 708px
术语处理：非技术读者用括号解释法
生成 html：基于模板骨架，修改主题色 + 内容 + 动画
测试：检查每页是否溢出、页脚是否正常、动画是否流畅