第二单元 打地鼠
第7课 CSS 与 JS：好看与加分
分清两层：CSS 管好看，JavaScript（JS）管点了加分。一次只改一层。
舞台有了，该让它好玩一点：洞更好看，点一下分数会跳。
先改好看，再改「点了加分」——每步自己点验，创意才真的往前走。
还不会冒地鼠也没关系；加分通了，下一课再让它们钻出来。
一、这一课怎么学
- 开始前你要会：第 6 课已经能看见洞和分数。
- 怎样算做完：洞更好看，并且点某个洞分数会 +1。
- 建议：先改好看，再加点分，每步都自己点验。
二、学完你能做到
- 能说出：CSS 管长什么样，JS 管点了会怎样。
- 能用 CSS 让洞更大或换颜色，且 HTML 九个洞还在。
- 能用一点点 JS 让点击后分数 +1。
三、弄懂这件事
第 6 课 HTML 骨架有了。这一课练另外两层：
1．CSS：长什么样
CSS 管外观：颜色、大小、圆角、间距。
改 CSS 时，不要让 AI 重写整页 HTML；九个洞的结构要还在。
改完自己打开看：洞更好看了，零件数量没丢，才算这一步过关。
2．JavaScript（JS）：点了会怎样
JS 管行为：点击洞之后，分数数字要真的变大。
只靠 CSS 换颜色，分数不会自己加；所以「好看」和「加分」是两层，别混着一次改光。
对 AI 限令要写清：只要加点击加分，不要重写整页，不要倒计时和随机出鼠（留给第 8 课）。
3．一次只改一层
先只改 CSS → 自己点验 → 再只加 JS 加分 → 再点验。
出了问题才知道坏在哪一层：结构（HTML）、外观（CSS）还是行为（JS）。
没有 JS，页面可以很漂亮，但还不算会记分的游戏。
点一点就明白
点下面的按钮，看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
指出：只改颜色该动哪一层；点了加分该动哪一层。
做对了会怎样只改颜色或大小应动 CSS；点了加分应动 JS，两层别混。
写一句对 AI 的限令：不要重写整页，只加点击加分。
做对了会怎样你的限令里出现「只改」和「不要重写整页」这类话。
五、轮到你做
好看 + 点洞加分
只改洞的背景色或大小（CSS）。
做对了会怎样洞还在、数量没丢，只是颜色或大小更好看了。
做不出来怎么办这一次只改一处样式（例如只改背景色），改完再预览。
加最小 JS：点任意一个洞，分数 +1（先不必随机出鼠）。
做对了会怎样点击洞之后，页面上的分数数字变大了。
做不出来怎么办先让其中一个洞按钮点击后分数 +1，跑通再推广到全部。
写一句：下一课要用 JS 做计时和出鼠。
做对了会怎样你写下节要用 JS 做计时或随机出鼠，写进笔记里。
做不出来怎么办可写：下一课用 JS 做倒计时和随机出鼠。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l07.html。做对了会怎样预览里洞更好看，并且点击后分数会增加。
做不出来怎么办先在预览里自己点一遍，确认现象后再说完成。
本节例子
工具打开时会先把上一课成果放进「代码」和「效果」。下面提示词请整段发送，在已有成果上小步改，不要整页重写。本课文件是 show/l07.html。
在当前已有的 3×3 打地鼠页上小步修改（不要删掉九个洞）： 1）改 CSS：洞更大、分数更醒目； 2）保留/确认：点击任意洞分数 +1。 倒计时和随机出鼠留给下一课。不要服务器。 输出要求：即使只改外观，也必须用 ```html 文件名 输出完整 HTML 全文（保留原有 script 与结构），禁止只输出 ```css 片段。页面打开后游戏/交互仍要能用。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
以为只有 HTML/CSS 就能做出会记分的游戏。
为加一点 JS 让 AI 把整页重写，样式和结构都乱了。
七、带走这几句
- CSS 管好看，JS 管加分；两步都要自己点过。
- 三层顺序：HTML 骨架 → CSS 外观 → JS 行为。
八、打勾再往下
- 我改过 CSS 且洞还在。
- 我点洞能看到分数变化。
- 我知道第 8 课还要用 JS 做计时与出鼠。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
点洞后分数增加，主要靠？
CSS 主要管？
只有漂亮洞、没有脚本时？