🏠 第六课：个人主页项目 — 组装课

前五课，你攒了一堆零件：发动机（HTML）、外壳（CSS）、方向盘（JS）、智能排队系统（Flexbox）。

这节课不做新零件，而是把零件组装成一辆能开上路的车 🚗——你的第一个完整作品：个人主页。

这节课有两份文件，分工不同：

文件身份你要做什么
my-homepage.html🎨 你的作品动手改它，把它变成你自己的主页
lesson6-homepage.html📖 说明书看它，理解作品的每一块是怎么拼的

先看成品再拆解 👇

👉 打开我的作品

🗺️ 2. 一页网站 = 6 块积木

任何网页展开来看，都是从上往下摞的几大块（还记得吗——div 默认像叠石头）。个人主页就是这 6 块：

┌─────────────────────────────────────────┐ │ 🧭 导航栏 logo＋链接＋🌙 ← space-between │ ├─────────────────────────────────────────┤ │ 🖼️ 头像区 (hero) ← 居中三句 │ │ 名字 · 一句话自我介绍 │ ├─────────────────────────────────────────┤ │ 💬 关于我 ← 普通文字段落 │ ├─────────────────────────────────────────┤ │ 🛠️ 技能卡 ×6 ← flex-wrap 自动换行 │ ├─────────────────────────────────────────┤ │ 🎮 作品卡 ×4 ← flex-wrap │ ├─────────────────────────────────────────┤ │ 📭 页脚 │ └─────────────────────────────────────────┘

每一块都对应你学过的招式：

积木核心招式来自
导航栏justify-content: space-between第五课
头像区flex 居中三句第五课
技能/作品卡flex-wrap + gap第五课
点导航跳转<a href="#id"> 锚点第一课
🌙 夜间模式点击事件 + DOM第三课
全站换色CSS 变量 ⭐本课新学
🔍 对照练习：打开 my-homepage.html 的源代码，从上往下读——你会发现每一块的代码注释都标着"第几课的招式"。读一遍源码，等于复习了前五课。

⭐ 3. 新知识：CSS 变量 — 给颜色起名字

以前的烦恼

一个网站里主色（比如蓝色 #2563eb）可能出现在 10 个地方：按钮、链接、边框、头像圈……

想换主色？你得满文件找 10 处、改 10 次，漏一处，网站就"花脸"。

CSS 变量的解法

:root {
  --main: #2563eb; /* 给颜色起名字，叫 --main */
}

.btn { background: var(--main); } /* 用的时候喊名字 */

以后想换主色，只改 :root 里那一行，全站 10 处自动跟着变。

🎭 比喻：艺名。颜色本尊躲在 :root 里，全站元素只认它的"艺名"--main。
想换人？把艺名的"真身"换掉就行——台下所有喊这个名字的观众，看到的自动是新面孔。

另一层比喻：:root 是全站的总闸。老房子换灯要一盏一盏换；装了总闸，扳一下全换。

亲手试试：一处改，三处变

下面这个演示区，标题、盒子边框、按钮 3 个地方的颜色，全都来自同一个变量 --demo-main。点按钮换"真身"试试：

我是标题，颜色来自变量
我的边框也来自变量


你只改了一个变量的值，3 个地方同时变脸——这就是为什么大网站都爱用 CSS 变量。

🌙 4. 拆解夜间模式 — 变量的实战应用

作品里那个 🌙 按钮，原理其实就三步：

第一步：白天是默认色

:root {
  --bg: #f0f4f8;
  --text: #1f2937;
}

第二步：夜间只是"换个真身"

body.dark {
  --bg: #0f172a; /* 名字没变，真身换成深色 */
  --text: #e2e8f0;
}

注意：全站元素写的还是 var(--bg)，一行都不用改。只要 body 戴上 .dark 牌子，所有变量自动指向深色真身。

第三步：JS 一行，负责"戴牌子/摘牌子"

document.body.classList.toggle('dark');

toggle = 拨动开关：有牌子就摘掉，没牌子就戴上。这行代码你其实见过——第三课学的 DOM + 事件。

💡 比喻：灯的拉绳。拉一下亮（戴上 dark），再拉一下灭（摘掉 dark）。
页面本身只有一套"灯"（CSS 变量），变的是开关状态（class 牌子）。
🕳️ 留个悬念：现在切到夜间模式，然后按 F5 刷新——模式忘了，对吧？
网页本来是没有记忆的。下一课 localStorage，我们就给这个主页装上"记忆"，让它记住你喜欢白天还是黑夜。

🛠️ 5. 动手挑战 — 把"模板"变成"你的主页"

以下全部改 my-homepage.html（用记事本或 VS Code 打开它）：

✏️ 五个挑战，从易到难：

① 换上你自己
把"你的名字"替换掉（一共 3 处：导航栏 logo、头像区 h1、页脚），把"关于我"的两段占位文字写成真实的自我介绍，tagline（头像区那行小字）改成你自己的话。

② 换一套配色（体验变量的威力）
只改 :root 里的 --main 一行，比如试试 #7c3aed（紫）或 #059669（绿）。保存刷新，看按钮、链接、头像圈、标题色条——全站一起变色。

③ 加一张技能卡片
复制一张 skill-card 的代码，改掉 emoji、名字和状态（比如"📷 摄影 🔜 待学习"）。保存刷新——它会自动排进队伍，一行塞不下就自动换行，什么都不用调。

④ 把作品卡变成真的"你的作品"
四张作品卡已经链接好了（俄罗斯方块点开就能玩 🎮）。把描述文字改成你自己的话，或者加一张新卡片链接别的文件。

⑤ 附加题：让头像会动
在 CSS 的 .avatar 规则里加一句：
.avatar:hover { transform: scale(1.1) rotate(3deg); }
（模板里已经预留了 transition，鼠标放头像上试试）

操作方式：改代码 → 保存 → 刷新浏览器。建议按 ①→⑤ 顺序做，每做完一个就刷新看看。

📋 6. 今日总结

知识点一句话
网页结构一页 = 从上往下摞的几大块（积木）
CSS 变量 ⭐给颜色起名字，:root 里改一处全站变
夜间模式变量换真身 + classList.toggle 拨开关
项目思维先蓝图拆积木，再一块块拼——以后所有网页都这么做
🎉 恭喜！把这五个挑战做完，my-homepage.html 就是真正属于你的个人主页了——
大学课程作业、简历链接、给朋友炫耀，全都能用它。
更重要的：你已经跑通了一条完整流水线——画蓝图 → 拼积木 → 上色 → 加互动。这就是做网页软件的全过程。

✅ 下一步？

💾第七课：localStorage（推荐）让主页记住你的夜间模式选择，网页第一次拥有记忆
📱响应式设计让主页在手机上打开也不乱

先做挑战，做完喊我检查！然后我们商量下一课 🚀