CSS 实例

下面用几个小例子把本教程里的知识点串起来，方便你动手练习和复习。

实例 1：卡片（背景、圆角、阴影、内边距）

<div class="card">
  <h3>卡片标题</h3>
  <p>这是一段描述文字，用来演示卡片的样式。</p>
  <a href="#" class="btn">查看详情</a>
</div>

.card {
  max-width: 320px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card h3 {
  margin-top: 0;
  color: #333;
}

.card p {
  color: #666;
  line-height: 1.6;
}

.card .btn {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 16px;
  background: #0066cc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.card .btn:hover {
  background: #0052a3;
}

涉及：盒子模型、背景、圆角、阴影、padding、选择器、链接样式。

---

实例 2：简单水平导航 + 悬停

<nav class="nav">
  <a href="/">首页</a>
  <a href="/about">关于</a>
  <a href="/contact">联系</a>
</nav>

.nav {
  background: #333;
  padding: 0 20px;
  display: flex;
  gap: 0;
}

.nav a {
  display: block;
  padding: 14px 20px;
  color: #fff;
  text-decoration: none;
}

.nav a:hover {
  background: #555;
}

涉及：Flex、链接、padding、颜色、悬停。

---

实例 3：居中布局 + 最大宽度

<div class="page">
  <main class="main">主内容区域，最大宽度 800px，居中。</main>
</div>

.page {
  min-height: 100vh;
  padding: 20px;
}

.main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

涉及：max-width、margin 居中、内边距、背景。

---

实例 4：简单响应式（小屏单列）

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.item {
  padding: 24px;
  background: #eee;
  border-radius: 4px;
  text-align: center;
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

涉及：Grid、媒体查询、响应式。

---

小结

• 卡片：盒子、背景、圆角、阴影、链接。
• 导航：Flex、链接样式、:hover。
• 居中：max-width、margin: 0 auto。
• 响应式：Grid + @media。

建议把以上代码复制到本地或 CodePen，改颜色、间距、断点，观察效果，巩固本教程内容。