实战一：从零做一个网页

完整流程

1. 先建一个专用文件夹

   在桌面新建文件夹，比如 我的第一个网页，然后在 Codex 里把它选为工作区。有照片想让网页用上的话，也一起丢进去。

2. 用一段"说全了"的指令开场

   直接抄这段，把方括号换成你的内容：

   首轮指令（可直抄） 复制

   帮我做一个单页网站，主题是［我的咖啡店］。
   
   页面结构：
   1) 顶部：店名 + 一句话介绍 + 一个"查看菜单"按钮
   2) 中间：三张卡片介绍［手冲、拿铁、甜点］
   3) 底部：地址、营业时间、联系电话
   
   要求：
   - 只生成一个 HTML 文件，双击就能打开，不要依赖任何需要安装的东西
   - 风格［温暖、干净］，主色调［棕色 + 米白］
   - 手机上打开也要好看，文字不能超出屏幕
   - 我做生意不太懂技术，请顺便告诉我：做好之后怎么改文字？
   
   做完请自己检查一遍手机上的显示效果，并把检查过程告诉我。

3. 等它跑完，然后双击打开看

   文件通常在文件夹里，名字类似 index.html。双击，浏览器会打开它。这一步没有替代品，必须你自己看。

4. 开始提意见，一轮一个

   "标题太小了""卡片挨太近了""主色调偏暗了，亮一点""底部加个微信二维码的位置"。每改一次刷新一下浏览器看效果。

   
   一个小技巧：浏览器里按 Ctrl+Shift+R 可以强制刷新，避免看到旧的样子。

5. 用手机检查一遍

   把浏览器窗口拖窄，模拟手机宽度；或者干脆把文件传到手机上打开。你会发现一堆在电脑上看不出来的问题——这时候截图丢给它：手机上显示成这样，帮我修。

6. 想发出去？多问一句

   我想把这个网页发到网上让别人看，最简单的免费办法是什么？请给我一步步的操作。 它会给你几条路线，你挑一条跟着走。

用完自查（勾选会保存进度）

• 看得到双击文件能打开，不是一片空白
• 放得下手机宽度下没有横向滚动条，文字没被切掉
• 点得动所有按钮点了有反应，链接不是死链
• 断网也能看关掉 WiFi 再打开，页面依然正常（说明没依赖外部资源）
• 改得动你自己知道怎么改文字和换图片了

想自己改网页？先记住这六处

不用学前端，只要知道去哪儿找。让 Codex 告诉你文件里的位置，然后你自己动手改一一处试试。

1. 文字内容

   几乎所有文字都直接写在 HTML 里，找到那句话改掉即可。改完刷新页面就能看到。

2. 图片

   把新图片放进同一个文件夹，然后把页面里的图片文件名换成新的。注意文件名大小写要完全一致。

3. 颜色

   搜 # 开头的那六位代码，或者搜 color。改一个主色，整页风格就变了。

4. 字号与间距

   搜 font-size（字号）和 padding／margin（内外间距），数字越大越宽松。

5. 链接

   搜 href=，它后面引号里的那串地址就是要跳转的网址；mailto: 是发邮件，tel: 是打电话。

6. 手机上的样子

   搜 @media，那是"屏幕变窄时改用另一套样式"的地方。改这里最容易改坏，建议先复制一份再动。

遇到这些情况怎么办