8. 综合练习：个人主页美化
这是什么：综合实战 = 把选择器、盒模型、Flex、Grid 一次性用上，给素 HTML 页面换上一整套样式的完整练习。
为什么用：最后一章，把 CSS 里学的选择器、盒模型、Flex、Grid一起用上，给 HTML 教程写过的个人主页做一次完整美化——只学不用，样式永远写不熟。
如何用：先对照目标效果清单，点「▶ 运行」立刻看效果；想把代码存成本地文件，直接从框里复制。
8.1 目标效果
素 HTML 变成「像点样子」的个人主页：
- 页面浅灰底，内容块白色卡片，有阴影和圆角
- 导航栏 Flex 排布，悬停变色
- 技能列表用 Grid 做成三列卡片
- 整页字体排版设置为「阅读舒服」版
8.2 在线运行
点开就能跑：CSS 全部写进 <style>，点「▶ 运行」立刻看到效果；代码可直接复制存成 .html 慢慢改。
💡 代码可直接复制；想改、想跑，点右上「🧪 在线运行场」。
8.3 技术点对照表
| 用了什么 | 在哪学的 |
|---|---|
box-sizing: border-box |
第 4 章 盒模型 |
| Flex 导航栏、两端对齐 | 第 6 章 Flex |
| Grid 三列技能卡 | 第 7 章 Grid |
| 卡片圆角阴影 + padding | 第 4 章 |
| 颜色、字体、行高 | 第 3 章 |
:hover 悬停变色 |
第 2 章 |
8.4 拓展练习（选做）
- 响应式：加媒体查询，窗口小于 600px 时技能改两列、卡片 padding 减半
- 头图：给
#about加背景色渐变background: linear-gradient(120deg, #2dd4a7, #3b82f6);，文字改白色 - 吸底：用 Grid 的
grid-template-areas把 footer 固定在页面底部
8.5 小结
恭喜！CSS 教程的全部章节完成。你从一条规则写起，到最后做出完整页面皮肤——
- 选择器：给元素起名、按名配样式
- 盒模型：留白、边框、间距心里有数
- Flex / Grid：一维二维布局不动手量像素
前端三件套正式集齐：HTML 骨架 + CSS 皮肤 + JavaScript 灵魂。 接下来补上工具课和框架课，去 路线图 看后续章节 🐸