# 🃏 第1a课：卡片的骨架 — HTML + 基础 CSS

**目标：** 做一张漂亮的静态卡片，学会 HTML 布局和基础 CSS 美化
**时长：** 2 小时
**前置：** 认识 HTML 基本标签（div、h1、p、button）
**成果：** 一张好看的静态卡片（还不能动，下节课加交互）

---

## 📋 教学流程

| 时间 | 环节 | 内容 |
|------|------|------|
| 0-15min | 📺 导入 | 展示这节课要做出来的卡片 / 分析页面结构 |
| 15-40min | 🏗️ 搭结构 | 写 HTML，理解 div 盒子嵌套 |
| 40-65min | 🎨 基础样式 | CSS：颜色、字体、圆角、间距、阴影 |
| 65-85min | ✨ 进阶样式 | box-shadow 详解、背景色搭配 |
| 85-100min | 🎨 自由美化 | 换颜色、换字体、加自己喜欢的元素 |
| 100-120min | 🎤 展示 | 看看谁做的卡片最好看 |

## 🧠 新知识点

### 1. CSS 盒子模型（核心）

```css
.card {
    /* 从外到内 */
    margin: 20px;        /* 外间距 */
    border-radius: 16px; /* 圆角 */
    padding: 40px;       /* 内间距 */
    background: #fff;    /* 背景色 */
}
```

### 2. CSS 选择器

```css
/* 类选择器 - 最常用 */
.card { ... }
.subtitle { ... }

/* ID 选择器 - 用于 JS 操作的元素 */
#quoteText { ... }
```

### 3. 常用样式属性

| 属性 | 作用 | 例子 |
|------|------|------|
| color | 文字颜色 | `#333` |
| font-size | 字号 | `22px` |
| text-align | 对齐 | `center` |
| border-radius | 圆角 | `16px` |
| box-shadow | 阴影 | `0 4px 20px rgba(0,0,0,0.1)` |
| background | 背景 | `#f0f0f0` |

### 4. 这节课不用

- ❌ 渐变色（background: linear-gradient）
- ❌ 动画（@keyframes / transition）
- ❌ JavaScript
- ❌ 复杂的布局（flexbox 简单讲）

## 🚀 学生可以做

- [ ] 换背景色和卡片颜色
- [ ] 换字体、字号
- [ ] 加背景图片
- [ ] 加边框
- [ ] 调阴影大小和颜色

## ✅ 这节课结束时的成果

一张漂亮的静态卡片，标题 + 金句展示区 + 按钮，但按钮还不能点（下节课的事）。