卡片的骨架
HTML 结构 + 基础 CSS 美化
← → 键切换 · 点击底部导航跳转
用 HTML div 搭出卡片的骨架
CSS 基础属性：颜色、字体、圆角、阴影
理解 margin / padding / border-radius 的关系
换颜色、调大小、做自己的版本
⚠️ 按钮还不能按！这节课只做样子，下节课加交互
这节课的全部代码，一共 115 行，我们逐行讲解：
每行代码的作用我们一页一页来看 👇
一个 HTML 文件的基本骨架：
告诉浏览器「这是 HTML5 文档」
支持中文显示
在手机上也显示正常
| 96 | <div class="card"> | 卡片大容器，class给CSS用 |
| 97 | <h1>✨ 金句卡片</h1> | 最大字号标题 |
| 98 | <p class="subtitle"> | 副标题，灰色小字 |
| 101 | <div class="quote-display"> | 金句的容器 |
| 102 | <div id="quoteText"> | 金句内容 id 给下节课 JS 用 |
| 103 | <div id="quoteAuthor"> | 作者 |
| 107 | <button class="btn"> | 按钮，现在还点不动 |
重点 class="xxx" 给 CSS 用 · id="xxx" 给 JS 用
| 16 | font-family | 字体：雅黑 / 苹方，手机电脑都好看 |
| 17 | background-color: #667eea | 纯色背景（不教渐变色，以后学） |
| 18 | min-height: 100vh | vh = viewport height，100vh=满屏高度 |
| 19 | display: flex | 弹性布局，让卡片居中 |
| 20 | justify-content: center | 水平居中 |
| 21 | align-items: center | 垂直居中 |
| 22 | margin: 0 | 去掉浏览器默认外边距 |
| 23 | padding: 20px | 四周留白，小屏幕不贴边 |
100% 的视窗高度。不管屏幕多大，都撑满。
display:flex + justify-content + align-items = 完美居中三件套
| 28 | background: #fff | 白色背景，和蓝色背景区分 |
| 29 | border-radius: 20px | 圆角，数字越大越圆 |
| 30 | padding: 48px 40px | 上下48px，左右40px 内间距 |
| 31 | max-width: 480px | 最大宽480，太大不好看 |
| 32 | width: 100% | 小屏幕时自适应宽度 |
| 33 | text-align: center | 所有文字居中 |
| 34 | box-shadow | 阴影：右0 下8px 模糊30px 颜色 |
padding 是 内边距（内容到边框的距离）
margin 是 外边距（边框到其他元素）
border-radius 是 圆角
box-shadow: X Y 模糊 颜色
例：0 8px 30px rgba(0,0,0,0.15)
= 右0 下8 模糊30 黑15%透明度
| 39 | font-size: 26px | 字号 |
| 40 | color: #333 | 深灰色（不是纯黑更柔和） |
| 41 | margin-top: 0 | 去掉标题默认上边距 |
| 42 | margin-bottom: 8px | 标题和副标题的间距 |
| 47 | font-size: 14px | 小字号 |
| 48 | color: #999 | 浅灰色，弱化 |
| 49 | margin-bottom: 32px | 距离下面金句区的间距 |
规律 标题大+深色 → 副标题小+浅色，层次感就出来了
| 54 | min-height: 120px | 最小高度，防止空的时候太扁 |
| 55 | padding: 20px 0 | 上下留白 |
| 59 | font-size: 24px | 大字号，突出金句 |
| 60 | line-height: 1.6 | 行高，1.6倍字号 |
| 61 | color: #333 | 深灰色 |
| 62 | font-weight: 500 | 中等粗细（400普通，700粗） |
| 63 | margin-bottom: 16px | 和作者名的间距 |
| 67 | font-size: 15px | 比金句小 |
| 68 | color: #999 | 浅灰色，弱化作者 |
| 69 | font-style: italic | 斜体，更像引用 |
| 71 | .quote-author::before | 在作者名字前面加内容 |
| 72 | content: "—— " | 加上破折号前缀，更文艺 |
不用在HTML里写"——"，CSS自动添加，代码更干净
| 77 | padding: 14px 36px | 按钮内间距，宽宽的舒服 |
| 78 | border: none | 去掉默认边框 |
| 79 | border-radius: 12px | 按钮圆角 |
| 80 | background-color: #667eea | 和背景同色系 |
| 81 | color: #fff | 白色字 |
| 82 | font-size: 16px | 字号 |
| 83 | font-weight: 600 | 粗体 |
| 84 | cursor: pointer | 鼠标变成小手👆 |
| 85 | margin-top: 16px | 和上面金句保持距离 |
| 89 | .btn:hover | 鼠标放上去时 |
| 90 | background-color: #5a6fd6 | 颜色变深一点 |
CSS 伪类，鼠标悬停时触发的样式。让按钮有"反应"，用户就知道它可以点。
元素和其他元素的距离
body { margin: 0 } = 去掉浏览器默认间距
内容和边框的距离
.card { padding: 48px 40px } = 内容和卡片边缘的距离
把直角变成圆角
数值越大越圆，50% 就是圆形
代码里 `#667eea`、`#333`、`#fff` 都是颜色：
页面背景色
蓝紫色
标题文字颜色
深灰色
副标题/作者颜色
浅灰色
记忆 #ffffff = 白 · #000000 = 黑 · #开头后面6位 = 颜色代码
这节课用到的所有选择器：
| body | body { ... } | 标签选择器，选中 <body> 标签 |
| .card | .card { ... } | 类选择器，选中 class="card" 的元素 |
| .card h1 | .card h1 { ... } | 后代选择器，选中卡片里的 h1 |
| .subtitle | .subtitle { ... } | 类选择器 |
| .quote-display | .quote-display { ... } | 类选择器 |
| .quote-text | .quote-text { ... } | 类选择器 |
| .quote-author | .quote-author { ... } | 类选择器 |
| ::before | .quote-author::before | 伪元素，在元素前加内容 |
| .btn | .btn { ... } | 类选择器 |
| :hover | .btn:hover { ... } | 伪类，鼠标悬停时 |
规律 .开头 = 类选择器 · :开头 = 伪类/伪元素
整节课只有一个文件：index.html
三步写完：
第1-6行
<!DOCTYPE> + <head>
第7-92行
<style> CSS
第94-108行
<body> HTML
新建 index.html，打出 DOCTYPE 骨架
div.card → h1 → p.subtitle → div.quote-display → div#quoteText → div#quoteAuthor → button.btn
背景色 + flex 居中 + 去掉边距
白色背景 + 圆角 + 内间距 + 阴影
标题/副标题/金句/作者/按钮的样式
换颜色、调阴影、改字体
✅ HTML 文件基本骨架
✅ div 嵌套结构（卡片 → 展示区 → 金句）
✅ CSS 类选择器（.class）和后代选择器
✅ 盒子模型：margin / padding / border-radius
✅ 7 个 CSS 属性：color / font-size / background / box-shadow 等
✅ :hover 鼠标悬停效果
✅ ::before 伪元素加前缀内容
🎊 你做出了第一张漂亮的卡片！
下节课预告 💻 给卡片加上 JavaScript → 让它能动起来！