AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载assets/demo-images/是 HTML PPT Studiohtml-ppt-skill为全部image-*版式提供的内置占位图片素材7 个纯手写 SVG每个仅 0.5–1 KB、无任何外部引用保证模板离线即可完整渲染。阅读本文后你将掌握这套演示素材的设计动机、四种画幅比例的布局测试原理、.img-frame取景机制以及把占位图替换成自己.jpg/.png/.svg而不破坏版式的标准做法。一、demo-images 是什么一套为版式验证而生的占位图集按 assets/demo-images/README.md 的说明该目录的唯一职责是为templates/single-page/下的image-*系列版式提供占位图Placeholder artwork。它们不是正式素材而是让每个版式文件在没有任何真实图片的情况下也能被直接打开、预览和复制粘贴的演示数据。这套素材有三个明确的设计约束纯手写 SVG每个文件只有 1–2 KB实际量测见下文不使用任何外部图片、字体或网络引用因此任何浏览器都能离线渲染符合整个项目零构建、纯静态的定位见 README.md 的 Philosophy 一节与真实工作流等价构建真实 deck 时把你的.jpg/.png/.svg放到 deck 的index.html旁边只改src即可其余一切不变取景由框架负责版式不变的原因在于裁剪和比例都由 assets/base.css 中的.img-frame完成而不是由图片自身完成——换图不动版式是这套设计的第一原则。二、素材清单7 个文件与两种用途用wc -c实测目录下 7 个 SVG 的真实体积文件字节数画幅用途assets/demo-images/photo-landscape.svg607 B1600×100016:10横图占位用于image-full-bleed、image-galleryassets/demo-images/photo-portrait.svg586 B900×12003:4竖图占位用于image-text-split、image-galleryassets/demo-images/photo-square.svg596 B1000×10001:1方图占位用于image-galleryassets/demo-images/photo-wide.svg525 B2000×860约 21:9超宽图占位用于image-galleryassets/demo-images/shot-ui.svg1065 B1600×1000界面截图占位用于image-single、image-galleryassets/demo-images/shot-before.svg1066 B1600×1000改版前界面占位用于image-compareassets/demo-images/shot-after.svg1066 B1600×1000改版后界面占位用于image-compare、image-gallery其中photo-*四张是抽象风景占位渐变底 圆形/山形剪影用于验证照片类版式的取景shot-*三张是界面线框占位窗口红绿灯标题栏 内容矩形用于模拟截图场景。二者在版式中承担完全不同的角色照片讲究裁剪表现力截图讲究信息完整。三、为什么画幅比例故意混搭object-fit: cover 的抛题测试这是 demo-images 最容易忽视、却是最核心的设计决策。按 assets/demo-images/README.md 原话Aspect ratios are deliberately mixed (16:10, 3:4, 1:1, 21:9) so the layouts demonstrate thatobject-fit: coverhandles whatever you throw at it.翻译成工程语言这四张图故意覆盖 16:10、3:4、1:1、21:9 四种极端画幅目的是持续证明版式对任意图片比例都不破版。这一约束被 references/layouts.md 的表格进一步明确类名/变量作用.img-frame取景框拥有画幅比例与裁剪权内部的img用object-fit: cover填满它.img-frame.contain改用 letterbox留白不裁剪。截图、示意图、Logo 必须用它——裁剪会丢失信息--img-ratio取景框画幅比例默认16/10--img-posobject-position例如top可以保住画面顶部标题.img-scrim底部渐变压暗层保证照片上白字可读.img-cap取景框下方的图注行.img-tag取景框左上角的小胶囊标签demo-images 存在的意义就是让这套机制每时每刻都在被验证。四、源码级原理.img-frame如何让换图不动版式成立框与图分离的实现位于 assets/base.css。核心规则只有三条.img-frame{position:relative;margin:0;overflow:hidden; border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface-2); aspect-ratio:var(--img-ratio,16/10)} .img-frame img{width:100%;height:100%;object-fit:cover;object-position:var(--img-pos,center)} .img-frame.contain{background:var(--bg-soft);box-shadow:none;border:1px solid var(--border)} .img-frame.contain img{object-fit:contain}逐条拆解其工程含义取景框拥有比例aspect-ratio默认 16/10可由--img-ratio覆盖。比例属于框而非图片所以任何形状的图片进来都被框接管图片只负责填充object-fit: coverwidth/height 100%cover图片永远填满框并居中裁剪--img-pos可调整裁切焦点.contain模式翻转策略对截图、示意图、Logocover的裁切会丢信息于是contain改成 letterbox——整张图完整可见四周留白。README 中的经典对照写法是figure classimg-frameimg srcshot.png alt/figure !-- 裁切填满 -- figure classimg-frame containimg srcdiagram.svg alt/figure !-- 留白完整 --这正是 README.md 中 Images on a slide 一节给出的两个基础原语。demo-images 的存在使这两条原语在每一个image-*版式中都有真实的可视验证物。五、7 个 demo SVG 在版式中的实际落点从templates/single-page/的源码可以确认每一张占位图的具体用法1. 单图场景image-single.html——templates/single-page/image-single.html 使用.img-frame.contain承载shot-ui.svg配套.img-cap图注。版式注释明确要求截图 / 示意图 / 图表一律用 contain不要用 cover。2. 整页出血image-full-bleed.html——templates/single-page/image-full-bleed.html 使用photo-landscape.svg铺满全页.img-frame去掉圆角阴影、height:100%; aspect-ratio:auto叠加.img-scrim底部渐变压暗保证白字可读主体偏上时加style--img-pos:top。3. 图文分栏image-text-split.html——templates/single-page/image-text-split.html 使用竖图photo-portrait.svg框比例由--img-ratio:4/5固定为竖构图并叠加.img-tag左上角标签.split.flip可把图换到右侧。版式注释强调换成横图也不会破版。4. 多图网格image-gallery.html——templates/single-page/image-gallery.html 是混搭比例的主战场六张图原始比例各不相同16:10 / 1:1 / 3:4 / 21:9 全数出现靠.img-frame统一成一致网格。版式注释点明这正是网格版式最容易翻车的地方。5. 前后对比image-compare.html——templates/single-page/image-compare.html 两侧各用shot-before.svg与shot-after.svg取景框高度一致flex:1; min-height:0保证两侧尺寸完全相同——否则观众会把版式差异误读为内容差异。6. 封面视觉image-hero.html——templates/single-page/image-hero.html 是全套素材中唯一不引用 demo-images 的例外它用 Ken Burns 渐变背景.bg.kbkf-kenburns动画替代真实图片印证了 README 所述无须真实图片也能做出高级感。7. Bento 网格image-grid.html——templates/single-page/image-grid.html 同样不引用 demo-images7 个格子全部用 CSS 渐变占位。六、替换实战从占位图到你的真实图片按 assets/demo-images/README.md 的官方流程替换只做两件事把图片放到 deck 的index.html旁边用相对路径引用如srcshot.pngreferences/layouts.md 明确建议 Put your own images next to the decks index.html and reference them relatively只改img的src其余不动。替换时按图片类型二选一取景策略你的图片类型取景类原因照片人像、风景、现场.img-framecover 裁切裁掉边缘不影响信息追求填满表现力截图、示意图、图表、Logo.img-frame.containletterbox 留白任何裁切都会丢失信息进阶微调参数保护画面主体.img-frame上加style--img-pos:top或bottom/left/right裁切焦点对准主体改框的比例--img-ratio:4/5竖图或--img-ratio:16/9横图改变取景框的固有画幅压暗保证文字可读框内加div classimg-scrim/div底部渐变自动出现加图注与标签框下加.img-cap框内左上角加.img-tag。七、验证与运行离线、无构建的完整工作流demo-images 的所有设计约束最终都服务于离线可用。整个项目的运行时依赖只有一个assets/fonts.css中的 Google FontsimportREADME.md。离线时字体导入失败浏览器回退到assets/base.css声明的系统字体栈deck 依旧正确渲染。demo-images 自身零外部引用因此任何image-*版式在完全断网环境下都能直接打开验证。快速验证流程源自 README.md 的 Quick start# 用脚手架生成一个新 deck ./scripts/new-deck.sh my-talk # 直接打开某个 image-* 版式验证取景效果 open templates/single-page/image-gallery.html # 渲染成 PNG 检查输出 ./scripts/render.sh templates/single-page/image-gallery.html版式替换占位图的最小可运行示例对照 README.md 的基础原语figure classimg-frameimg srcassets/demo-images/photo-landscape.svg alt发布会现场/figure figure classimg-frame containimg srcassets/demo-images/shot-ui.svg alt产品主界面截图/figure把两个src换成你自己图片的相对路径版式零改动即可上线。八、总结assets/demo-images/是一个小而精的工程化设计用 7 个共 5.5 KB 的手写 SVG同时满足了版式离线可演示与任意比例图片不破版两个目标。它把三个关键知识固化成了可复现的样板框图分离——.img-frame拥有比例与裁剪图片只负责填充这是换图不动版式的基础assets/base.css双取景策略——照片用cover裁切填满截图/图表/Logo 用contain留白保信息混搭比例验证——16:10 / 3:4 / 1:1 / 21:9 四档画幅持续检验object-fit的容错能力assets/demo-images/README.md。当你构建自己的第一份真实 deck 时只需把占位 SVG 换成同目录下的.jpg/.png/.svg并更新src即可无缝沿用这套经过验证的取景体系。赞分享AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载相关推荐Apache Commons Collections MultiValuedMap一键多值映射的完整实现方案Apache Commons Collections MultiValuedMap一键多值映射的完整实现方案 Apache Commons CollectioEasydict 内置 fireworks-tech-graph Skill离线交互式架构图 HTML 的生成与使用指南Easydict 内置 fireworks tech graph Skill离线交互式架构图 HTML 的生成与使用指南 在 Easydict 仓库的 .ag桌面应用AI 应用fireworks-tech-graph 交互式架构图离线 HTML 查看器的打开方式与重新生成指南fireworks tech graph 交互式架构图离线 HTML 查看器的打开方式与重新生成指南 导读 本指南聚焦 fireworks tech graAI 技能数据可视化上一篇cartographer C11特性应用现代C在SLAM中的实践下一篇如何3分钟搞定国家中小学智慧教育平台电子课本下载tchMaterial-parser完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
