CSS 网页布局练习CSS 布局是前端开发的核心技能之一。无论你是刚入门的新手，还是有一定经验的开发者，掌握扎实的布局知

引言：为什么学习 CSS 布局？

CSS 布局是前端开发的核心技能之一。无论你是刚入门的新手，还是有一定经验的开发者，掌握扎实的布局知识都能让你的页面开发事半功倍。

布局技能的重要性

阶段	需要的布局能力
入门	理解盒子模型、掌握 Flexbox 基础
进阶	响应式设计、Grid 布局、复杂组件
精通	性能优化、无障碍设计、系统架构

入门级题目

题目1：两栏布局（左侧固定，右侧自适应）

要求：

创建HTML结构，包含左侧边栏和右侧主内容区
左侧边栏宽度固定为 250px
右侧内容区占据剩余空间
使用 Flexbox 或 Grid 实现
最小化代码量

HTML模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>两栏布局练习</title>
  <style>
    /* 在这里编写 CSS */
  </style>
</head>
<body>
  <aside class="sidebar">侧边栏</aside>
  <main class="main-content">主内容区</main>
</body>
</html>

知识点：

Flexbox: flex: 1 或 flex-grow: 1
Grid: 1fr 单位
高度统一问题

预期效果：

题目2：三栏布局（圣杯布局）

要求：

创建一个经典的三栏布局
左中右三栏排列，顺序为：左侧边栏、主内容区、右侧边栏
主内容区优先渲染（在DOM中放在最前面）
左右侧边栏宽度固定为 200px
主内容区自适应
整体高度占满视口

HTML模板：

<body>
  <header>头部区域</header>
  <div class="container">
    <main class="main">主内容区（最先渲染）</main>
    <aside class="left">左侧边栏</aside>
    <aside class="right">右侧边栏</aside>
  </div>
  <footer>底部区域</footer>
</body>

知识点：

Flexbox 排序： order 属性
圣杯布局原理
负 margin 技术

预期效果：

题目3：等高卡片布局

要求：

创建 4 个卡片并排显示
卡片内容高度不一致时，自动保持高度一致
使用 Flexbox 实现
添加边框和阴影效果

HTML模板：

<div class="card-container">
  <div class="card">
    <h3>卡片 1</h3>
    <p>简短内容</p>
  </div>
  <div class="card">
    <h3>卡片 2</h3>
    <p>中等长度的内容区域</p>
    <p>占两行显示</p>
  </div>
  <div class="card">
    <h3>卡片 3</h3>
    <p>简短内容</p>
  </div>
  <div class="card">
    <h3>卡片 4</h3>
    <p>很长的内容需要更多的空间来展示</p>
    <p>这使得卡片高度增加</p>
    <p>其他卡片需要自动匹配高度</p>
  </div>
</div>

知识点：

Flexbox 默认行为
align-items 默认为 stretch
卡片间距： gap 或 margin

预期效果：

进阶级题目

题目4：响应式图片网格

要求：

创建图片画廊布局
在大屏幕（>1200px）显示 4 列
在中等屏幕（768px-1200px）显示 2 列
在小屏幕（<768px）显示 1 列
使用 CSS Grid 实现
图片使用 object-fit: cover 保持比例

HTML模板：

<div class="gallery">
  <div class="gallery-item"><img src="https://picsum.photos/400/300" alt=""></div>
  <div class="gallery-item"><img src="https://picsum.photos/400/300" alt=""></div>
  <div class="gallery-item"><img src="https://picsum.photos/400/300" alt=""></div>
  <div class="gallery-item"><img src="https://picsum.photos/400/300" alt=""></div>
  <div class="gallery-item"><img src="https://picsum.photos/400/300" alt=""></div>
  <div class="gallery-item"><img src="https://picsum.photos/400/300" alt=""></div>
</div>

.gallery {
  display: grid;
  /* 你的代码在这里 */
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

知识点：

CSS Grid： grid-template-columns 、 repeat()
媒体查询： @media
minmax() 函数

预期结果：

题目5：响应式导航栏

要求：

创建导航栏，在大屏幕显示水平菜单
在小屏幕显示汉堡菜单（点击展开/收起）
导航项包括：首页、关于、服务、联系
使用纯 CSS 实现（不用 JavaScript）

HTML模板：

<nav class="navbar">
  <div class="logo">Logo</div>
  <input type="checkbox" id="menu-toggle" class="menu-checkbox">
  <label for="menu-toggle" class="menu-icon">☰</label>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

知识点：

纯 CSS 交互： :checked + ~ 选择器
Flexbox 水平排列
媒体查询断点设计
position: absolute 定位菜单

预期效果：

题目6：栅格系统

要求：

创建类似 Bootstrap 的 12 栅格系统
实现 .row 和 .col-* 类
支持不同屏幕尺寸的列宽：

- .col-12 （100%）
- .col-6 （50%）
- .col-4 （33.33%）
- .col-3 （25%）

添加列之间的间距

HTML模板：

<div class="container">
  <div class="row">
    <div class="col-3">1/4 宽度</div>
    <div class="col-3">1/4 宽度</div>
    <div class="col-3">1/4 宽度</div>
    <div class="col-3">1/4 宽度</div>
  </div>
  
  <div class="row">
    <div class="col-6">1/2 宽度</div>
    <div class="col-6">1/2 宽度</div>
  </div>
  
  <div class="row">
    <div class="col-4">1/3 宽度</div>
    <div class="col-4">1/3 宽度</div>
    <div class="col-4">1/3 宽度</div>
  </div>

  <div class="row">
    <div class="col-12">12/12宽度</div>
  <div>
</div>

知识点：

浮动布局或 Flexbox 布局
百分比宽度计算
calc() 函数
box-sizing: border-box 重要性

预期效果：

综合实战题目

题目7：个人作品集页面布局

要求：

使用你学过的所有布局技术创建一个作品集页面
页面结构包含：

1. 顶部导航栏（Logo + 菜单）
2. 英雄区域（大背景图 + 标题 + CTA按钮）
3. 关于我区域（左侧图片 + 右侧文本）
4. 作品展示区域（响应式卡片网格）
5. 联系表单区域（表单布局）
6. 底部版权信息

设计要求：

使用 CSS 变量定义颜色和间距
使用 Flexbox 布局导航和表单
使用 Grid 布局作品集卡片
响应式设计（移动端适配）
添加平滑的过渡动画

HTML模板：

<body>
  <nav class="navbar">...</nav>
  
  <section class="hero">
    <h1>我的作品集</h1>
    <button class="cta">查看作品</button>
  </section>
  
  <section class="about">
    <div class="about-image">...</div>
    <div class="about-text">...</div>
  </section>
  
  <section class="portfolio">
    <h2>我的作品</h2>
    <div class="portfolio-grid">
      <!-- 6 个作品卡片 -->
    </div>
  </section>
  
  <section class="contact">
    <h2>联系我</h2>
    <form>...</form>
  </section>
  
  <footer>...</footer>
</body>

预期效果（粗略制作仅供参考）：

题目8：电商产品列表布局

要求：

创建一个电商网站的产品列表页面
左侧边栏包含筛选条件（分类、价格范围）
右侧显示产品网格
产品卡片包含：图片、标题、价格、加入购物车按钮
排序和分页功能

布局要求：

侧边栏固定宽度：250px
产品网格响应式列数
购物车按钮悬停效果
页面整体占满视口高度

HTML模板：

<div class="page-container">
  <header class="shop-header">
    <h1>Shop</h1>
    <select class="sort-select">
      <option>价格从低到高</option>
      <option>价格从高到低</option>
      <option>最新发布</option>
    </select>
  </header>
  
  <div class="shop-layout">
    <aside class="filters">
      <h3>分类</h3>
      <ul>
        <li><input type="checkbox"> 电子产品</li>
        <li><input type="checkbox"> 服装</li>
        <li><input type="checkbox"> 家居</li>
      </ul>
      
      <h3>价格范围</h3>
      <input type="range" min="0" max="1000">
    </aside>
    
    <main class="product-grid">
      <!-- 8-12 个产品卡片 -->
      <div class="product-card">
        <img src="..." alt="">
        <h4>产品名称</h4>
        <p class="price">$99.00</p>
        <button>加入购物车</button>
      </div>
    </main>
  </div>
</div>

预期效果（粗略制作仅供参考）：

题目9：完美居中布局

要求：

在页面正中心放置一个登录框
登录框包含：Logo、用户名输入框、密码输入框、登录按钮
无论页面大小如何，登录框始终居中
添加背景渐变效果

HTML模板：

<body>
  <div class="login-container">
    <div class="login-box">
      <div class="logo">Logo</div>
      <form>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
</body>

知识点：

Flexbox 居中： justify-content + align-items
Grid 居中： place-items: center
min-height: 100vh

预期效果（粗略制作仅供参考）：

题目10：Timeline 时间线布局

要求：

创建垂直时间线布局
显示 5 个时间节点
每个节点包含：日期、内容、图标
交替在左右两侧显示内容
添加连接线和动画效果

HTML模板：

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-date">2024年1月</div>
    <div class="timeline-content">
      <h3>项目启动</h3>
      <p>项目开始规划和设计</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-date">2024年3月</div>
    <div class="timeline-content">
      <h3>第一阶段</h3>
      <p>完成核心功能开发</p>
    </div>
  </div>
  
  <!-- 更多时间节点... -->
</div>

知识点：

Flexbox 纵向排列
伪元素绘制连接线
:nth-child() 选择器
:hover 动画效果

预期效果（粗略制作仅供参考）：

寄语

CSS 布局不难，难的是理解其背后的设计思想。

学习布局不是记忆属性，而是理解空间分配和元素关系的过程。

希望这 10 道练习题能帮助你建立扎实的 CSS 布局基础。记住，优秀的布局不仅要看起来美观，更要HTML 结构合理、适配各种设备噢。祝你学习愉快，代码整洁！🚀