场景实战
做一个个人网页或落地页
不会写代码也能做:让 Codex 做一个个人主页或产品落地页,在浏览器里打开,并一步步改到满意。
开始前
涉及真实文件(比如你的照片、简历)先复制一份放进项目文件夹,不要直接用原件。不要把密码或密钥写进对话。
适合谁
想要一个个人主页、作品集、活动页或产品介绍页的人,比如设计师、自由职业者、做副业的人、学生。
准备什么
- 一个新的空文件夹,比如
我的网页,并加进 Codex; - 想放上去的文字:名字、介绍、联系方式等;
- (可选)想用的图片,复制到这个文件夹里;
- (可选)一两个你喜欢的网站,作为风格参考。
复制这段话给 Codex
帮我在这个文件夹里做一个[个人作品集 / 产品落地页]网页。
内容:
- 标题:[你的名字或产品名]
- 一句话介绍:[……]
- 三个亮点:[……]、[……]、[……]
- 联系方式:[邮箱]
- 图片:文件夹里的 [photo.jpg](没有就先用灰色占位框)
要求:
- 只用 HTML、CSS,主页文件叫 index.html,不需要安装任何东西,双击就能打开;
- 风格[简洁 / 活泼 / 高级感],参考 [某个网站];
- 手机和电脑上都要好看。
做完告诉我怎么打开,并列出你创建了哪些文件。你会看到什么
Codex 会在文件夹里创建 index.html,可能还会有一个 .css 样式文件。完成后它会告诉你文件列表和打开方法。
检查结果
- 打开文件夹,双击
index.html,用浏览器打开; - 把浏览器窗口拉窄,模拟手机屏幕,看排版是否正常;
- 逐个检查文字有没有错,链接能不能点。
桌面应用也能直接预览网页文件;内置浏览器还能让你在页面上直接圈出要改的地方。
想再改进可以这样说
把首屏的背景换成渐变色,从浅蓝到白色。加一个"作品"区域,用三列卡片展示,每张卡片有图片、标题和一句话说明。导航栏固定在顶部,点击菜单能平滑滚动到对应区域。检查一下网页在手机上的显示,有问题的地方帮我修好。我想把这个网页发布到网上让别人访问,有哪些免费的方法?先给我讲讲,不要动手。常见问题
| 问题 | 怎么办 |
|---|---|
| 图片不显示 | 确认图片在项目文件夹里,问 Codex"图片为什么不显示?帮我检查路径" |
| 改完刷新没变化 | 浏览器按 Cmd+Shift+R(Mac)或 Ctrl+F5(Windows)强制刷新 |
| 不喜欢整体风格 | 让它"给我三种不同风格的方案,分别存成 v1.html、v2.html、v3.html",挑一个再细改 |
| 改坏了 | 说"恢复到上一个版本",或看改坏了怎么办 |