Java停车场管理系统实战：Spring Boot+MySQL+计费并发
2026/9/25 4:02:27
- AI 技能/插件
- 前端
【免费下载链接】html-ppt-skill
HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML presentations
项目地址：https://gitcode.com/gh_mirrors/ht/html-ppt-skill
本文以 references/layouts.md 为骨架，系统梳理 HTML PPT Studio（html-ppt-skill）中
templates/single-page/下的全部可复用布局：它们如何作为独立页面运行、如何被拷贝拼装进新 Deck、图片版式的裁剪与比例体系如何工作，以及每一类布局的适用场景。读完本文，你将能像搭积木一样快速组合出一套结构完整、图文规范的专业 HTML 演示文稿，并理解底层assets/base.css、assets/runtime.js与配套脚本scripts/new-deck.sh、scripts/render.sh的具体配合方式。
一、Layout 的存放位置与两种使用方式
在 HTML PPT Studio 中，每个布局都是一个可独立运行的完整 HTML 页面，统一存放在 templates/single-page/ 目录下，文件命名即布局名（如cover.html、two-column.html、image-single.html）。每个文件都带有真实感十足的示例数据，你可以直接双击文件、用 Chrome 打开，看到的就是一个可以马上投入演示的成品页面。
使用布局有两种典型方式：
- 组合进新 Deck：打开某个布局文件，把其中的
<section class="slide">…</section>代码块（或连续多块）复制进你的 Deck HTML，然后替换掉示例数据即可。 - 整页单独演示：因为每个文件本身就是自足的（自带
fonts.css、base.css、主题 CSS、动画 CSS 与runtime.js引用），单个布局也可以独立放映。
以 templates/deck.html 为模板的 Deck 已经替你接好了所有共享资源，其<head>中的接线方式如下：
<link rel="stylesheet" href="../assets/fonts.css"> <!-- 字体 --> <link rel="stylesheet" href="../assets/base.css"> <!-- 布局/组件基础样式 --> <link rel="stylesheet" id="theme-link" href="../assets/themes/minimal-white.css"> <!-- 主题 --> <link rel="stylesheet" href="../assets/animations/animations.css"> <!-- 动效 --> ... <script src="../assets/runtime.js"></script> <!-- 键盘导航/主题切换/动效运行时 -->也就是说，当你把某个单页布局的<section class="slide">代码块拷入 Deck 时，不需要再拷贝该布局文件头部的 CSS 引用，deck.html已经统一完成装配；你只需要关注 slide 内部的标记结构。这也是“共享 CSS（base、theme、animations）由 deck.html 统一接线”的由来。
二、图片版式的核心：.img-frame框架体系
image-*系列布局（共 7 个）使用的是真实的<img>元素，而不是背景图。关键设计在于：裁切与比例由框架.img-frame控制，而不是由图片自己控制。因此，当你把演示照片换成自己的素材时，唯一需要改动的就是一个src属性，布局绝不会因为图片尺寸不同而破版。
以下是原文档给出的.img-frame完整参数表（对照 assets/base.css 中的实现逐一展开）：
| 类 / 变量 | 作用 | 源码实现要点 |
|---|---|---|
.img-frame | 图片的“画框”。拥有宽高比与裁切权，内部<img>以object-fit: cover填满 | aspect-ratio: var(--img-ratio, 16/10)；overflow: hidden；圆角取var(--radius)、阴影取var(--shadow)，背景为var(--surface-2) |
.img-frame.contain | 改为 **letterbox（信箱式）**而非裁切。截图、示意图、Logo 必须用它——裁切会丢失信息 | 背景切换为var(--bg-soft)、去阴影、加1px solid var(--border)边框；img使用object-fit: contain |
--img-ratio | 框架宽高比，默认16/10 | 通过 CSS 变量覆盖，例如--img-ratio:4/5可得到竖版构图 |
--img-pos | object-position，例如top可保住图片顶部（如标题、人脸） | 默认center，经object-position: var(--img-pos, center)生效 |
.img-scrim | 图片底部渐变遮罩，让白色文字在照片上保持可读 | linear-gradient(180deg, transparent 42%, rgba(8,10,20,.72))，绝对定位铺满整个框架 |
.img-cap | 框架下方的图注文字 | font-size:14px; color: var(--text-3)，上边距 10px |
.img-tag | 框架左上角的小药丸标签 | 半透明深色底rgba(10,12,20,.55)+ 白色大写字母 +backdrop-filter: blur(6px) |
2.1 一张图讲清楚一件事：image-single.html
image-single.html 是“单图 + 图注”的典型版式，专为截图、图表、架构图设计——框架使用.img-frame.contain，保证整张图完整可见、绝不裁切：
<figure class="img-frame contain"> <img src="../../assets/demo-images/shot-ui.svg" alt="产品主界面截图"> </figure> <p class="img-cap">图 1 · 新版工作台。左侧是任务流，右侧是实时指标。</p>该布局还在页面级<style>中做了高度自适应处理：.fig让框架吃掉标题之外的所有剩余高度（flex:1; min-height:0），因此无论在什么窗口比例下页面都能撑满而不错位。
2.2 左图右文：image-text-split.html与flip
image-text-split.html 是“图文各半”的 50/50 版式，核心结构如下：
<div class="split"> <div class="col-img anim-fade-right">const accent = css.getPropertyValue('--accent').trim(); const text2 = css.getPropertyValue('--text-2').trim(); const border = css.getPropertyValue('--border').trim(); new Chart(document.getElementById('c'), { type: 'bar', data: { /* backgroundColor: accent … */ }, options: { scales: { x: { ticks: { color: text2 }, grid: { color: border } }, … } } });这意味着所有 Chart.js 图表天然继承当前主题——运行时按T切换主题后，刷新页面图表配色即与全局一致。
3.4 代码与终端（Code & terminal）
| 文件 | 用途 | 结构要点 |
|---|---|---|
| code.html | 语法高亮代码块（highlight.js，JS 示例） | 代码卡片 + 文件名眉题 |
| diff.html | 手写实现的 +/− diff 视图 | 绿色+行、红色−行，纯 CSS 完成 |
| terminal.html | 带红绿灯头部的终端窗口模拟 | 自带blink光标闪烁动画；该页单独以terminal-green主题渲染，氛围更真实 |
3.5 图表与流程（Diagrams & flows）
| 文件 | 用途 | 结构要点 |
|---|---|---|
| flow-diagram.html | 5 节点管道流程，箭头连接，可高亮一个节点 | 适合介绍流水线、调用链 |
| arch-diagram.html | 三层架构网格 | 经典 presentation / business / data 分层表达 |
| process-steps.html | 4 个编号步骤卡片 | grid g4+ 大号序号 |
| mindmap.html | 放射状思维导图，SVG 路径绘制动画 | 借助path-draw动效逐笔画出连线 |
3.6 计划与对比（Plans & comparisons）
| 文件 | 用途 | 结构要点 |
|---|---|---|
| timeline.html | 5 点横向时间轴，带圆点 | 适合里程碑回顾 |
| roadmap.html | 4 列 NOW / NEXT / LATER / VISION | 规划类演示首选 |
| gantt.html | 12 周甘特图，5 条并行轨道 | 项目排期展示 |
| comparison.html | Before vs After 双面板卡片 | 改造前后对照 |
| pros-cons.html | 优点/缺点双卡片 | 决策分析场景 |
| todo-checklist.html | 勾选/未勾选状态的清单 | 状态推进演示 |
3.7 视觉类（Visuals）
| 文件 | 用途 | 关键区别 |
|---|---|---|
| image-single.html | 一张图，不裁切（.img-frame.contain）+ 图注。截图、示意图、图表专用 | 图片信息完整保留 |
| image-full-bleed.html | 一张图铺满整页，渐变遮罩 + 标题压在图上。照片专用 | 配合.img-scrim保证文字可读 |
| image-text-split.html | 一张图 + 文字，50/50。给.split加flip可把图换到右侧 | 图文论证场景 |
| image-gallery.html | 3–6 张图，统一网格、每张一条图注。混合比例的图由框架统一归一化 | 不同来源截图混排也不乱 |
| image-compare.html | 两张图并排，before/after，带标签与结论行 | 改造对比、修图对比 |
| image-hero.html | 全出血 hero，Ken Burns 渐变背景（无真实图片） | 适合抽象大气开场 |
| image-grid.html | 7 格bento 网格，渐变占位（无真实图片） | 信息密度高的聚合页 |
3.8 收尾（Closers）
| 文件 | 用途 | 结构要点 |
|---|---|---|
| cta.html | 行动号召页：大号渐变标题 + 按钮 | 渐变文字 + 按钮行 |
| thanks.html | 最终致谢页，彩带爆裂动效 | 依靠confetti-burst动画收尾 |
四、按场景快速选版（Picking a layout）
原文档给出的选版清单如下，逐条保留并补充说明：
- 开场：
cover.html，通常随后接toc.html； - 章节分隔：每个主要章节前放
section-divider.html； - 核心正文：
bullets.html、two-column.html、three-column.html； - 展示数字：单个大数字用
stat-highlight.html，四个一组用kpi-grid.html； - 展示图表：
chart-bar.html/chart-line.html/chart-pie.html/chart-radar.html，按数据类型选柱/线/环/雷达； - 展示差异或变化：文本对照用
comparison.html，代码差异用diff.html，权衡分析用pros-cons.html； - 展示计划：
timeline.html（里程碑）、roadmap.html（四象限规划）、gantt.html（排期）、process-steps.html（步骤）； - 展示一张图：截图/示意图/图表永远用
image-single.html（contain不裁切）；希望照片撑满整页则用image-full-bleed.html； - 图文并重：
image-text-split.html； - 展示多张图：均匀排布用
image-gallery.html（3–6 张）；参差不齐的 bento 排布用image-grid.html； - 展示变化对比：
image-compare.html（两张图）、comparison.html（纯文字）； - 展示架构：
arch-diagram.html、flow-diagram.html、mindmap.html； - 代码/演示：
code.html、terminal.html； - 收尾：
cta.html→thanks.html。
五、命名与结构约定：构建自有布局的规范
原文档定义了所有布局共同遵守的结构契约。这些类名在 assets/base.css 中均有对应实现，是保证“任意布局混装进同一 Deck 依然风格统一”的根本：
| 元素 | 写法 | base.css 中的实现 |
|---|---|---|
| 幻灯片 | <section class="slide"><section class="slide is-active">./scripts/new-deck.sh <name> [output-parent-dir] [-t <template>]
6.2 无头渲染： |