主题
第3课：让网页动起来
静静待在那里的网页太无聊了！今天我们要给网页施加魔法，让它能动、能变、还能跟你互动！
⏱️ 预计用时：45 分钟
学习目标
学完这节课，你将能够：
- 理解CSS和JavaScript分别是什么，它们各自的"超能力"
- 用Claude Code给网页添加动画和特效
- 做出一个有趣的性格测试小游戏
- 学会"分步骤思考"——把一个大任务拆成小任务
网页世界的三大魔法师
上节课我们认识了HTML——网页的"骨架"。但一个只有骨架的网页太素了，我们还需要两位魔法师来帮忙：
CSS = 化妆师
CSS是网页的化妆师。它负责让网页变得好看：
- 给文字换颜色、换字体
- 设置背景、边框、阴影
- 调整大小、位置、间距
- 做出渐变、圆角等好看的效果
- 还有！动画效果也是它的拿手好戏
你上节课让Claude Code做的那些"改成粉色"、"加阴影"——其实都是CSS在工作。
JavaScript = 魔术师
JavaScript是网页的魔术师。它让网页变得"有生命"：
- 你点一个按钮，页面内容就变了——这是JavaScript
- 鼠标移到某个地方，弹出一个提示——这是JavaScript
- 做一个测试题，根据你的选择显示不同结果——还是JavaScript
- 计时器、动态效果、游戏逻辑——全都是JavaScript的功劳
小贴士
你不需要自己写CSS和JavaScript的代码！你只要用中文告诉Claude Code你想要什么效果，它就会帮你搞定。但了解"谁在做什么"会帮你更好地描述你的需求。
比如你想让东西"变好看"→ 那是在让Claude Code写CSS 你想让东西"能互动"→ 那是在让Claude Code写JavaScript
想了解更多？
HTML、CSS和JavaScript的关系
可以用人来打比方：
- HTML = 身体骨架和器官（结构和内容）
- CSS = 衣服、发型和妆容（外观和样式）
- JavaScript = 大脑和神经系统（行为和互动）
三个合在一起，才是一个完整的、好看的、有灵魂的网页。
几乎互联网上所有的网页都是这三种技术组合而成的。你现在正在用的浏览器，就是一个能"读懂"这三种语言的翻译官。
动手时间（上）：给网页加特效！
让我们先热热身，给上节课做的个人介绍网页加一些好玩的效果。
打开终端，进入上节课的文件夹，启动Claude Code：
bash
cd my-webpage
claude试试这些酷炫效果
魔法咒语
特效1：鼠标悬停变色
给网页上所有的爱好卡片添加鼠标悬停效果——鼠标移上去的时候卡片放大一点点，阴影变深，有一个平滑的过渡动画特效2：入场动画
让页面上的各个板块依次从下往上淡入出现，每个板块间隔0.2秒，效果要平滑自然特效3：点击互动
在页面上加一个"点击换颜色"的按钮，每次点击页面的背景颜色就随机变成一个好看的浅色特效4：打字机效果
让页面标题（我的名字）有一个打字机效果，文字一个一个蹦出来，好像有人在打字一样每加一个效果，记得刷新浏览器（F5）看看变化。是不是越来越酷了？
注意
如果某个效果不是你想要的样子，直接告诉Claude Code哪里不满意就好。比如："动画太快了，能不能慢一点？"或者"颜色不好看，能换成更柔和的色调吗？"不用不好意思提要求，这就是和AI合作的方式！
重要概念：学会拆任务
现在我们要做一个更大的项目了——性格测试小游戏。
但是等等！做一个游戏听起来很复杂对不对？别慌，这里有一个超级重要的技巧：
把大任务拆成小任务！
这就像吃一个大披萨——你不会整个塞嘴里，而是一块一块地吃。做项目也是一样的道理。
如果你对Claude Code说：
"帮我做一个完整的性格测试小游戏，有题目有选项有结果有动画有好看的样式"
它可能做出来的效果不太好，因为你一下子塞了太多东西。
更好的方式是分步骤来：
第1步：先搭好基本的页面布局（标题、简介、开始按钮）
第2步：添加测试题目和选项按钮
第3步：添加计分和显示结果的功能
第4步：美化页面，加上好看的颜色和样式
第5步：加上动画和过渡效果每一步都让Claude Code做一件事，确认没问题了再进入下一步。这样做出来的效果会好很多！
小贴士
这个"拆任务"的方法不只是编程有用。写作文、做手工、学一个新技能……都可以用这个方法。把大目标拆成小步骤，每一步都不难，一步一步走完就成功了！
动手时间（下）：做一个性格测试游戏！
好啦，让我们来做今天的大项目——"你是什么类型的学习者？"性格测试！
先创建一个新文件夹：
bash
mkdir my-quiz
cd my-quiz
claude第1步：搭建基本页面
魔法咒语
帮我创建一个性格测试网页，主题是"你是什么类型的学习者？"。先做基本的页面结构：
1. 页面顶部有一个好看的标题"你是什么类型的学习者？"
2. 标题下面有一段简短的介绍文字，告诉用户这个测试有5道题
3. 一个醒目的"开始测试"按钮
4. 整体风格可爱活泼，用渐变背景
5. 用一个HTML文件，CSS和JavaScript都写在里面等Claude Code做完，打开浏览器看看效果：
bash
start index.html看起来不错吧？好的，继续下一步。
第2步：添加测试题目
魔法咒语
现在给这个测试添加5道题目。每道题有3个选项（A/B/C），对应三种学习类型：
- 视觉型（喜欢看图、看视频来学习）
- 听觉型（喜欢听讲解、讨论来学习）
- 动手型（喜欢亲自尝试、做实验来学习）
题目要贴近中学生的日常生活，比如：
- 学一首新歌时你会怎么做？
- 去一个新地方你怎么记路？
- 复习考试你喜欢怎么复习？
要求：
- 点击"开始测试"后显示第一道题，一次只显示一道
- 选了答案自动跳到下一题
- 每道题的选项做成好看的按钮样式
- 顶部显示进度，比如"第2题 / 共5题"刷新浏览器，试试看能不能做题了！
第3步：添加结果页面
魔法咒语
现在添加测试结果功能：
- 5道题做完后，根据用户选最多的类型，显示对应的结果
- 视觉型结果：显示标题"你是视觉型学习者！"，配上描述文字和学习建议，用蓝色主题
- 听觉型结果：显示标题"你是听觉型学习者！"，配上描述文字和学习建议，用绿色主题
- 动手型结果：显示标题"你是动手型学习者！"，配上描述文字和学习建议，用橙色主题
- 结果页面要有一个"重新测试"按钮
- 结果出现的时候加一个好看的动画效果第4步：加上动画和细节
魔法咒语
最后帮我美化一下这个测试：
1. 切换题目的时候加上滑动过渡效果
2. 鼠标悬停在选项按钮上时有放大和变色的效果
3. 选中一个选项后，那个按钮有一个短暂的"弹跳"动画
4. 结果页面的标题加上一个彩色渐变文字效果
5. 页面底部加上一行小字："这只是一个有趣的测试，不是科学评估哦~"刷新浏览器，从头到尾做一遍测试，看看效果怎么样！
小贴士
如果某一步的效果不满意，别跳过它直接做下一步。先跟Claude Code说清楚哪里要改，改好了再继续。一步一步来，最终的成品才会让你满意。
回顾一下你学到了什么
今天的内容很丰富！让我们整理一下：
CSS（化妆师）
负责网页的外观和样式。颜色、字体、动画、布局都归它管。你告诉Claude Code"变好看"的需求，它就会用CSS来实现。
JavaScript（魔术师）
负责网页的互动和逻辑。点击、判断、计分、显示/隐藏都是它的工作。你告诉Claude Code"能互动"的需求，它就会用JavaScript来实现。
分步骤做项目
大项目不要一口气描述完。拆成小步骤，每步让Claude Code做一件事，做完确认，再做下一步。这样效果最好。
想了解更多？
为什么要分步骤？
这涉及到一个编程界（其实也是各行各业）的重要智慧：复杂的东西都是由简单的部分组成的。
专业的程序员做大型项目（比如开发一个App）也是这么干的——他们把项目拆成很多小任务，每次只专注做一个小任务。这种方法有个专业的名字叫"分而治之"（Divide and Conquer）。
你现在用Claude Code的时候学会了这个方法，以后不管做什么事，这个思维方式都会帮到你。
今天的项目成果
太厉害了！你今天完成了一个会动的、能互动的性格测试小游戏！
想想看你做到了什么：
- 给网页添加了动画效果（CSS动画）
- 做出了可以点击、能判断结果的小游戏（JavaScript逻辑）
- 学会了把大项目拆成小步骤来完成
- 做出了一个可以分享给朋友玩的小游戏！
你可以把这个网页发给你的朋友们试试——直接把那个文件夹发给他们，让他们打开 index.html 就能玩了。
小测验
来检验一下这节课学到了多少吧！
1. CSS 的主要作用是什么？
2. JavaScript 的超能力是什么？
3. 为什么「分步骤做项目」很重要？
挑战任务
你的任务是： 做一个你自己设计的测试主题！
魔法咒语
这是一个参考咒语，把里面的内容换成你自己的创意：
帮我修改这个性格测试，把主题改成"你是哪种动物人格？"，结果类型改成：
- 猫咪型：独立、安静、有自己的小世界
- 小狗型：热情、忠诚、喜欢交朋友
- 兔子型：温柔、敏感、心思细腻
题目也要相应地修改，要好玩有趣你可以选择任何你感兴趣的主题，比如：
- "你适合什么课外活动？"
- "你是哪种类型的朋友？"
- "你的专属超能力是什么？"
- "你最像哪个动漫角色？"
发挥你的想象力，创造一个属于你自己的测试吧！
注意
记得用"分步骤"的方法！先让Claude Code改主题和题目，确认好了再改结果页面的内容，最后再调整颜色和动画。不要一口气全部塞给它哦。
你已经完成了前三课的学习！从完全不懂编程，到能做出一个会动的、有互动功能的网页小游戏——这个进步真的非常了不起。
记住：编程的世界很大，而你刚刚拿到了一把钥匙。继续保持好奇心，继续大胆尝试，你能做的事情比你想象的多得多！
留言讨论