📌 写在前面

作为一名后端开发者，我一直专注于业务逻辑、数据库操作和接口开发。然而在日常开发过程中，我发现前后端配合往往存在视觉与交互方面的沟通障碍。因此，我决定系统性学习前端开发，从最基础的 HTML 和 CSS 入手。

本篇是我前端学习的第一个小实践——使用纯 HTML + CSS 实现一个静态卡片组件，用于展示博客文章或产品信息。整个过程不涉及 JavaScript，更专注于结构和样式。

🎯 学习目标

  • 熟悉 HTML 的基础结构与语义标签；
  • 理解 CSS 的盒模型、布局模型；
  • 使用 Flexbox 实现响应式布局；
  • 构建一个美观的静态卡片组件。

🧱 项目结构

card-demo/
├── index.html
└── style.css

🧾 HTML 结构（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>静态卡片</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="card">
    <img src="https://via.placeholder.com/300x180" alt="封面图" class="card-img" />
    <div class="card-content">
      <h2 class="card-title">学习CSS静态卡片</h2>
      <p class="card-description">
        这是一个使用纯CSS构建的卡片组件，不依赖JavaScript，适合用于展示博客、产品、资讯等内容。
      </p>
      <a href="#" class="card-button">阅读全文</a>
    </div>
  </div>
</body>
</html>

🎨 CSS 样式（style.css）

body {
  font-family: "Helvetica", sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  padding: 50px;
}

.card {
  width: 300px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card-title {
  margin: 0 0 10px;
  font-size: 20px;
  color: #333;
}

.card-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.card-button {
  display: inline-block;
  text-decoration: none;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.3s ease;
}

.card-button:hover {
  background: #0056b3;
}

💡 学习收获

  1. HTML 结构清晰是关键：采用语义化标签有助于结构清晰，利于SEO与可维护性。
  2. CSS 盒模型理解透彻：margin、padding、border 的组合关系决定了元素之间的间距和布局。
  3. Flexbox 是利器：虽然本案例用得不多，但接下来我计划使用 Flexbox 或 Grid 构建更复杂的布局。
  4. 样式分离更清晰：将 CSS 独立成文件，不仅提高可读性，还便于后期复用与模块化。

🚀 下一步计划

  • 将静态卡片组件升级为响应式卡片组件（支持不同屏幕尺寸）；
  • 学习 CSS Grid 布局；
  • 尝试构建一个列表页面，包含多张卡片，并支持 hover 交互；
  • 最终目标是将这些组件集成到一个前后端联动的博客系统中。

📷 效果预览（建议附图）

可以附上一张卡片组件的预览图，尺寸为 1920x1080 或适配博客平台的宽度。

📝 总结

第一篇学习日志只是开始。作为后端开发者，学习前端不是跨界，而是补足自己的“全栈力”。未来我希望能更高效地与前端协作，甚至能独立完成一个小型产品的全流程开发。