Qoder PPT 生成器 v2
将文稿转化为 Qoder 品牌风格的 HTML 演示文稿。
模板文件：template.html （同目录下）
核心布局
封面页：完全居中
.slide.cover { justify-content: center; align-items: center; padding: 60px 120px; }
内容页：标题顶部 + 内容居中
.slide { padding: 120px 120px 80px 120px; } .content-center { flex: 1; } .content-center > *:not(h2) { margin: auto 0; }
页面结构
封面页
<section class="slide cover active"> <div class="brand"><span class="logo">QODER</span></div> <div class="content"> <h1><span class="highlight">关键词</span> 主标题</h1> <p class="subtitle">副标题</p> </div> <span class="page-number">01</span> </section>
内容页（通用结构）
<section class="slide {type}"> <div class="brand"><span class="logo">QODER</span></div> <div class="content-center"> <h2 class="section-title">标题</h2> <!-- 内容区域 --> </div> <span class="page-number">02</span> </section>
内容区域类型
要点列表 (points)
<ul class="point-list"> <li><span class="bullet"></span><span class="text">要点内容</span></li> </ul>
卡片网格 (cards)
<div class="card-grid"> <div class="card"> <h3 class="card-title"><span class="highlight">标题</span></h3> <p class="card-content">内容</p> </div> </div>
对比布局 (compare)
<div class="compare-grid"> <div class="compare-item"> <h3><span class="highlight">左侧</span>标题</h3> <ul><li>对比点</li></ul> </div> <div class="compare-divider">VS</div> <div class="compare-item"> <h3><span class="highlight">右侧</span>标题</h3> <ul><li>对比点</li></ul> </div> </div>
流程图 (flow)
<div class="flow-container"> <div class="flow-step"> <div class="step-number">1</div> <div class="step-content">步骤说明</div> </div> <div class="flow-arrow">→</div> <!-- 更多步骤 --> </div>
数据展示 (data)
<div class="data-grid"> <div class="data-item"> <span class="data-value">99%</span> <span class="data-label">指标说明</span> </div> </div>
表格 (table)
<table class="data-table"> <thead><tr><th>维度</th><th>A</th><th>B</th></tr></thead> <tbody><tr><td>特征</td><td>值A</td><td><span class="highlight">值B</span></td></tr></tbody> </table>
总结 (summary)
<div class="summary-content"> <p class="key-point"><span class="highlight">核心要点</span> 补充说明</p> </div>
设计规范
颜色
用途 值
背景 #000000
高亮 #2ADB5C
标题 #FFFFFF
正文 #96989A
次级 #68696B
边框 #343434
字体
-
中文：Alibaba PuHuiTi 2.0 / PingFang SC
-
英文/数字：Montserrat
字号
元素 大小
大标题 h1 66px
章节标题 h2 36px
卡片标题 h3 28-30px
正文 24px
演示功能
操作 效果
→ / Space
下一页
← / Backspace
上一页
Home / End
首页/末页
点击右 2/3 下一页
点击左 1/3 上一页
检查清单
-
第一个 slide 有 active 类
-
所有 slide 在 slides-container 内
-
h2 标题在 content-center 内部
-
封面页使用 .slide.cover
-
关键词使用 <span class="highlight">
-
页码递增正确
禁止事项
-
禁止 h2 放在 content-center 外部
-
禁止遗漏第一个 slide 的 active 类
-
禁止使用非规定颜色
-
禁止单页内容过多