# 🃏 第1课：金句卡片 — 静态页面 + 基础 JS

**目标：** 做一个漂亮的卡片页面，点击按钮切换金句
**时长：** 2 小时
**前置：** 基础 HTML + CSS
**文件：** `index.html`（单文件，全部在里面）

---

## 📋 教学流程

| 时间 | 环节 | 内容 |
|------|------|------|
| 0-20min | 📺 导入 | 展示成品效果 / 复习 HTML 结构 / 预告这节课要做什么 |
| 20-50min | 🎨 写页面 | 搭建卡片 HTML 结构 + CSS 美化 |
| 50-80min | 💻 加交互 | JavaScript 入门：变量、数组、函数、事件 |
| 80-95min | ✨ 优化 | 加动画效果，调整样式 |
| 95-120min | 🎤 展示 | 互相看作品 + 自由发挥 |

## 🧠 知识点

### 1. HTML 结构（学生会的，快速过）
- `<div>` 布局
- 标题、按钮、展示区域

### 2. CSS 美化（重点）
```css
/* 卡片圆角 + 阴影 */
.card {
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    padding: 40px;
}

/* 按钮悬停效果 */
button:hover {
    transform: translateY(-2px);
}
```

### 3. JavaScript 基础（新知识）

```javascript
// 数组 — 存金句列表
const quotes = [
    { text: "不积跬步...", author: "荀子" },
    { text: "学而不思...", author: "孔子" },
];

// 随机选一个
function getRandomQuote() {
    const index = Math.floor(Math.random() * quotes.length);
    return quotes[index];
}

// 点击事件 — 修改页面内容
button.addEventListener('click', function() {
    const q = getRandomQuote();
    document.getElementById('quote').textContent = q.text;
});
```

## 🚀 学生可以做

- [ ] 改颜色、字体、背景
- [ ] 加更多金句
- [ ] 加渐入/渐出动画
- [ ] 加「复制金句」按钮

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

一个漂亮的、可交互的「金句卡片」页面，点按钮换一句。