🃏

第1课：金句卡片

HTML + CSS + 基础 JavaScript

2 课时 纯前端 无需网络
← → 键切换 · 点击底部导航跳转
1 / 8

🎯 这节课做什么

✨ 一个漂亮的卡片，点按钮就能换金句
全部在一个 HTML 文件里完成
🎨

做页面

HTML 布局 + CSS 美化，让卡片好看

💻

写交互

JavaScript 数组存金句、随机切换、点按钮响应

✨

加动画

淡入淡出效果，让页面更流畅

🎤

自由发挥

改样式、加功能、做自己的版本

2 / 8

🏗️ HTML 结构（快速复习）

<div class="card">
  <h1>✨ 金句卡片</h1>
  <p class="subtitle">点击按钮收获金句</p>

  <div class="quote-display">
    <div id="quoteText">点击按钮开始</div>
    <div id="quoteAuthor">金句工坊</div>
  </div>

  <button id="nextBtn">🎲 换一句</button>
</div>

关键 给 JS 要操作的元素加上 id

3 / 8

🎨 CSS 美化技巧

🌈

渐变色背景

background: linear-gradient(
  135deg, #667eea, #764ba2
);
📦

卡片圆角 + 阴影

border-radius: 20px;
box-shadow: 0 20px 60px
  rgba(0,0,0,0.15);
🖱️

按钮悬停效果

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px...
}
✨

淡入动画

@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
4 / 8

💻 JavaScript 新知识

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

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

// 3. 点击 → 改页面内容
btn.addEventListener('click', function() {
  quoteText.textContent = q.text;
  quoteAuthor.textContent = q.author;
});

重点 记住 3 个概念：数组 · 随机数 · 事件监听

5 / 8

🛠️ 动手步骤

  1. 搭结构 — 写好 HTML 卡片布局
  2. 加样式 — CSS 渐变背景、卡片阴影
  3. 写数据 — JS 数组放 6+ 条金句
  4. 写交互 — 随机函数 + 点击事件
  5. 加动画 — 淡入淡出效果
  6. 秀作品 — 互相看看谁的最好看！
6 / 8

🚀 还可以做什么

🎨

改配色

换不同的渐变色、字体、背景图案

📋

加金句

加 10 句 20 句，可以按分类放

📋

复制按钮

点击「复制」把金句复制到剪贴板

⏱️

自动轮播

每隔 5 秒自动换一句

7 / 8
🎉

这节课学会了

✅ 用 CSS 做出漂亮的卡片

✅ JS 数组存数据

✅ Math.random() 随机选取

✅ 点击事件修改页面内容

✅ 页面动画效果

下节课预告 ☁️ 从互联网拿金句！

8 / 8