用 Codex 修改已有网页：从提出需求到检查结果

01先有原稿，再谈修改

本课使用已有的 Lin 个人网页。你可以用自己的 HTML/CSS 页面，也可以下载原始中文示例包。包内首页是完成版；要比较最初效果，可以打开保留的初稿。

修改自己的页面前，复制一份完整文件夹留作备份，记录正在预览的文件路径。只在副本上练习；有 Git 使用经验时，也可以先提交一个基线版本。

02让它先读懂已有页面

先确认目录、文件分工和预览方式，避免在另一个同名目录里修改。此时只要求阅读与说明。

请先确认当前工作目录的完整路径，阅读这个目录里的个人网页文件，说明页面结构、样式文件和预览方法。找出昵称下方简介的字号，以及简介到兴趣区域的间距由哪里控制。先不要修改文件，也不要发布。

将回复中的路径与自己的文件夹对照。不同页面可能把样式放在 HTML 内，也可能使用单独的 CSS；不要照搬示例文件名来判断自己的项目。

03一次说清改什么、保留什么

本次案例只调整简介字号和兴趣区上方间距。下面的需求写法适合在自己的页面上复用；如果当前效果已经合适，可以换成另一个你确实想改的小问题。

请只调整首页昵称下方的简介字号，以及简介和兴趣列表之间的距离，让它在手机与桌面上更容易阅读。保留原有文字、配色、作品内容和交互，不添加功能或外部依赖。
修改前先说明准备改哪些文件；修改后列出实际改动，并在桌面宽度和约 390 像素宽度下检查是否有文字遮挡或横向溢出。如果某项检查没有执行，请明确写出。只修改本地文件，不发布。

04对照已有案例的实际变化

• 桌面简介字号：17px → 20px。
• 手机简介字号：16px → 18px。
• 兴趣区域上方间距：26px → 38px。
• HTML 内容不变，改动仅在 CSS 中。

这些数字描述该次修改，不是所有页面通用的最佳字号。记录证明改动符合要求；没有读者研究量化可读性提升。

05刷新以后，按顺序验收

1. 确认预览的仍是刚修改的文件，刷新页面。
2. 检查简介是否变大、间距是否增加，并对比修改前截图。
3. 检查昵称、兴趣、作品文字和配色是否被意外改变。
4. 分别查看桌面与手机宽度，检查遮挡和横向滚动。
5. 点击原有链接和作品折叠区域，确认交互仍可用。

已有案例在本地 HTTP 预览下检查了 1280、390、320px 宽度，均无横向溢出；直接 file:// 打开与跨浏览器、真实手机测试未验证。你自己的页面仍要重新检查，不能把案例结果当作自己的验收结果。

06不满意时，给下一轮明确边界

如果出现副作用，先说明具体位置、宽度和现象，不必要求重做整个页面。保留原稿能帮助你比较，必要时也能恢复。

这次修改后，在 [窗口宽度] 下出现了 [具体现象]。请保留已经确认的 [改动]，只修复 [问题位置]，不要重做整个页面。完成后说明修改文件，复查原来的内容、交互与小屏幕显示，并区分已检查和未检查的项目。

最后保留通过检查的版本和修改摘要。完整原始记录见Lin 网页演示；若文件找不到或修改没有显示，参见常见问题。