CSS 综合实战

这是 CSS 系列课程的收官篇。从系列第一课开始，选择器、盒模型、Flexbox、Grid、响应式，一路学到现在。今天不用单个知识点做例子，而是从零做一个完整的个人博客首页，把学过的内容全部串起来。这也是正式做项目前最好的热身。

第一步，先想清楚再做

很多人写页面上来就写代码，写到一半发现缺东少西。正确姿势是先列需求清单。以个人博客首页为例，需要这些区块：

顶部导航栏，站名加几个链接
主体区域，左侧文章列表，右侧个人简介
每篇文章是一张卡片，标题、摘要、日期
底部版权信息

设计风格定为简洁风，白底、深灰文字、一个蓝色主色调。颜色和间距后面会用 CSS 变量统一管理，方便调整。

第二步，语义化 HTML

结构用语义化标签搭好，header、nav、main、section、aside、footer，一个都不能少。语义化对 SEO 和屏幕阅读器友好，也方便自己维护。

<!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="base.css">
  <link rel="stylesheet" href="layout.css">
  <link rel="stylesheet" href="components.css">
</head>
<body>
  <header class="site-header">
    <a href="#" class="logo">小明博客</a>
    <nav class="main-nav">
      <a href="#">首页</a>
      <a href="#">文章</a>
      <a href="#">关于</a>
    </nav>
  </header>

  <main class="layout">
    <section class="posts">
      <article class="card">
        <h2>CSS 响应式设计入门</h2>
        <p class="card-date">2026-08-19</p>
        <p>响应式设计的三大支柱，流式布局、弹性图片和媒体查询。</p>
      </article>
      <article class="card">
        <h2>CSS 动画入门</h2>
        <p class="card-date">2026-08-18</p>
        <p>用 @keyframes 写出自动播放的多段动画。</p>
      </article>
    </section>

    <aside class="profile">
      <h3>关于我</h3>
      <p>前端学习者，正在把 CSS 从头到尾啃一遍。</p>
    </aside>
  </main>

  <footer class="site-footer">© 2026 小明博客</footer>
</body>
</html>

第三步，全局样式

每个浏览器默认样式不同，比如 margin 和 padding 都有差异。处理方式有两个流派。reset 是把默认样式全部清零，一切从零开始。normalize 是尽量抹平浏览器差异，保留有用的默认值。个人小项目用简化版 reset 就够：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* 宽高包含 padding 和 border，布局更好算 */
}

html {
  font-size: 16px;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
  background: #f7f7f7;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

box-sizing 这一行非常关键。改成 border-box 后，width 就是最终的盒子总宽，做响应式时算尺寸省心很多。

第四步，样式文件怎么组织

页面变复杂后，所有样式挤在一个文件里会很难维护，按职责拆分是常见做法。base 放 reset 和全局默认值，layout 放页面骨架布局，components 放卡片、按钮这类组件，utilities 放工具类比如 .text-center。文件拆开后用多个 link 标签引入，注意顺序，后面的样式表会覆盖前面的同名规则，所以按 base、layout、components 从底层到上层的顺序排。

@import 也能引入样式，但它在加载时是串行的，性能比 link 差，实际项目尽量不用。

第五步，Grid 和 Flexbox 协同

整页骨架用 Grid 的区域法划分，一目了然。导航和卡片内部用 Flexbox 排细节，两者各司其职。

/* layout.css */
.layout {
  display: grid;
  grid-template-columns: 1fr 280px;  /* 左侧文章区自适应，右侧固定 */
  grid-template-areas: "posts profile";
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

.posts { grid-area: posts; }
.profile { grid-area: profile; }

/* components.css */
.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.main-nav {
  display: flex;
  gap: 20px;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

第六步，响应式适配

小屏幕上一左一右太挤，改成单列，侧边栏挪到下面：

/* layout.css */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas: "posts" "profile";
  }
}

配合响应式课里学的 viewport 和弹性图片，手机上的体验就不会差。

第七步，动效点缀

动效不用多，点缀即可。卡片 hover 上浮已经写了。再给卡片加一个入场动画，页面加载时淡入上浮，用动画课里的知识就能实现：

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: rise-in 0.5s ease-out;
}

第八步，兼容性检查

上线前做三件事。第一，拿不准的特性去 caniuse.com 查浏览器支持情况。第二，个别老浏览器需要的 -webkit- 前缀，现在主流特性基本不需要手动加了，真需要时可以用自动加前缀的工具处理。第三，想用新特性又怕老浏览器白屏，用 @supports 做特性检测：

@supports (display: grid) {
  .layout { display: grid; }
}

最后一步，按 F12 打开 Chrome 开发者工具，用设备模拟模式切换几个常见机型看效果，手机、平板、电脑各看一眼，重点检查有没有横向滚动条。

课程总结与下一步

到这里，CSS 系列课程全部结束。回顾一下主线，先学选择器和盒模型理解样式作用机制，再学 Flexbox 和 Grid 搞定布局，然后用响应式、变量、动效让页面适应各种屏幕并且活起来，最后用实战把知识串成整体。这套体系已经能支撑你独立完成大部分静态页面。

后续想继续深入，方向有四个。想提升写作效率，学预处理器 Sass 或 Less。想规范团队代码，学 BEM 命名方法论。想快速出活，学 Tailwind 和 Bootstrap 这类框架。想追踪前沿，关注 container queries、:has 选择器、subgrid 这些新特性。不管选哪个方向，基础打牢了，一切都只是时间问题。