📌 学习背景

我是一名后端开发者，长期使用 PHP 和 Python 构建 Web 服务。但在真实开发过程中，我发现仅靠后端技能远远不够。一个完整的项目往往需要我参与前端展示部分，尤其是在管理后台、用户中心等功能模块的开发中。

为了更高效地打造前后端一体化项目，我决定系统性地学习前端。于是我开启了这段旅程，而今天，是我的第一篇前端学习日志，主题是：纯CSS静态卡片布局案例。

🎯 学习目标

  • 熟悉 HTML 与 CSS 的基础语法结构；
  • 理解 CSS 布局（Flexbox）的基本概念；
  • 实战制作一个静态展示用的用户卡片；
  • 为后续组件化与 JS 交互打下基础。

🛠️ 技术栈

  • 纯 HTML5 + CSS3
  • 无框架（不使用 Vue/React 等）
  • 使用现代 CSS 技术（Flexbox、Box Shadow、Border Radius）

✨ 项目演示图（静态卡片效果）

假设我们要制作的是一个如下风格的用户信息卡片：

+-------------------------------------------------+
| [头像]   用户名：张三                             |
|          职位：高级开发工程师                     |
|          简介：热爱编程，追求极致代码之美。        |
+-------------------------------------------------+

🧩 完整HTML+CSS代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>用户卡片展示</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .card {
      background-color: #fff;
      width: 350px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      padding: 20px;
      display: flex;
      gap: 15px;
      transition: transform 0.2s;
    }

    .card:hover {
      transform: scale(1.02);
    }

    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-image: url('https://i.pravatar.cc/70?img=3');
      background-size: cover;
      background-position: center;
    }

    .info {
      flex: 1;
    }

    .info h2 {
      margin: 0;
      font-size: 20px;
      color: #333;
    }

    .info p {
      margin: 5px 0;
      color: #777;
      font-size: 14px;
    }
  </style>
</head>
<body>

  <div class="card">
    <div class="avatar"></div>
    <div class="info">
      <h2>张三</h2>
      <p>职位：高级开发工程师</p>
      <p>简介：热爱编程，追求极致代码之美。</p>
    </div>
  </div>

</body>
</html>

🧠 知识点解析

知识点说明
flex 布局让卡片内部头像与文字横向排布，使用 display: flex; 和 gap 简化布局逻辑
box-shadow添加卡片阴影，提升视觉层次感
border-radius设置圆角边框，使头像和卡片整体更圆润
hover 动效鼠标悬停时放大卡片，提升用户交互感

📝 学习收获

  • CSS 布局其实不难，关键在于理解「盒子模型」与「弹性布局」；
  • 制作卡片类 UI 是非常适合初学者练手的项目；
  • 纯CSS也能实现相当精致的展示效果，不一定非得用框架。

🔜 下一步计划

  • 为这张卡片加上点击事件，展示更多用户详情（结合 JavaScript）；
  • 尝试制作一个「卡片列表」，为后台用户管理界面做准备；
  • 引入 Sass / Less 简化样式结构；
  • 最终目标：将前端 UI 与 Laravel/Python 后端数据对接，构建一整套可交互系统！

📚 参考资料