← 返回首页 AI 网页 Demo

AI 网页 Demo

这里放 AI 生成的小网页。每个 Demo 都是一个独立文件,有自己的网址,可以单独发给朋友玩。

Demo 列表

Demo 模板页 就是你现在看的这一页 · 结构示例
(等你放第一个作品) AI 生成的网页 · 待发布
(第二个位置) AI 生成的网页 · 待发布

发布新 Demo 只需要两步:把 AI 生成的 .html 文件放进 ai-demo/ 文件夹 → 复制上面第一张 <a class="demo">,把 href 改成新文件名。

新增一个 Demo 的完整流程

  1. 让 AI 生成「单文件网页」,也就是 HTML、CSS、JS 全在一个 .html 里,不依赖外部文件。
  2. 把文件存到 ai-demo/ 目录,文件名用英文小写加连字符,例如 niuniu.html。
  3. 回到上面「Demo 列表」,复制一张卡片,把 href 改成 niuniu.html,标题和说明换成你自己的。
  4. 本地双击 index.html 预览,确认能点进去、能玩、按返回能回来。
  5. 重新部署(上传整个 my-site 文件夹),就能把链接发给朋友了。

如果 AI 给的是一整个文件夹(带 style.css、script.js),也可以整个文件夹拖进 ai-demo/,链接写 ai-demo/文件夹名/index.html。只要保持相对路径,线上和本地表现一致。

可选:把 Demo 嵌进本页

如果希望「不跳走就能玩」,可以用 iframe 把 Demo 嵌进来。把下面这段粘到想放的位置,改一下 src 即可(Demo 文件要在同一目录下):

<iframe src="niuniu.html" title="捏牛小游戏"
        style="width:100%;height:520px;border:1px solid #e3e7ec;border-radius:10px;">
</iframe>

注意:height 太小学不会显示全,手机上建议改成 height:420px。

这一格留给以后嵌入的 Demo——现在先空着,等你有作品再放。

本页也是一份页面模板

想给某个 Demo 单独写介绍页时,可以直接复制 demo-template.html,改名为 ai-demo/你的demo.html,然后改标题、正文和返回链接即可。

要改的内容在哪里改
浏览器标签标题<title> 那一行
页面大标题<h1 class="page-title">
顶部面包屑<span class="crumb">
正文内容每一块 <section class="panel">
返回首页链接<a class="back">(新文件在同一层,仍是 ../index.html)