这个教程将带你从零开始，理解网页布局的核心概念，并亲手构建一个常见的、响应式的博客/文章类网站布局。

div css网页标准布局实例教程
（图片来源网络，侵删）

教程目标

通过本教程,你将学会：

  1. 理解核心概念：<div>、盒模型、定位、浮动、Flexbox 和 Grid。
  2. 构建标准布局：创建一个包含头部、导航、侧边栏、主内容区和页脚的经典网页布局。
  3. 实现响应式设计：让网页在不同屏幕尺寸（桌面、平板、手机）下都能良好显示。
  4. 掌握现代布局技术：重点使用 Flexbox 和 CSS Grid,它们是目前布局的最佳实践。

第一部分：核心概念回顾

在开始编码前，我们必须理解几个 CSS 布局的基本概念。

<div> - 布局的“积木”

<div> (Division) 是一个块级元素，没有任何特定含义，它就像一个空的容器或盒子，我们用它来包裹页面上的不同部分（如头部、导航、内容等），然后通过 CSS 来定义这些盒子的样式、位置和大小。

CSS 盒模型

每个 HTML 元素都可以看作一个盒子,这个盒子由四部分组成：

div css网页标准布局实例教程
（图片来源网络，侵删）
  • Content (内容)：盒子里实际的内容,比如文字或图片。
  • Padding (内边距)与盒子边缘之间的空间。
  • Border (边框)：盒子本身的边框线。
  • Margin (外边距)：盒子与其他盒子之间的空间。

重要：为了确保我们的 width 和 height 属性只控制内容区域，而不是整个盒子（包括 padding 和 border），我们会在 CSS 的开头使用 box-sizing: border-box;,这是现代网页开发的黄金法则。

布局技术演进

  • 浮动：早期用于实现多列布局，但容易引起各种布局问题（如父元素高度塌陷），需要额外技巧（如 clearfix）来修复。现在不推荐用于布局，但了解它有助于维护旧项目。
  • Flexbox (弹性盒子)：一维布局模型，非常适合在单个方向（行或列）上排列和对齐元素，它是实现组件内部布局（如导航栏、按钮组）的利器。
  • CSS Grid (网格布局)：二维布局模型，可以同时控制行和列，它是构建整个页面复杂布局最强大、最灵活的工具。

本教程将主要使用 Flexbox 和 Grid，因为它们是现代、高效且易于维护的解决方案。

第二部分：实战演练 - 构建一个博客网站

我们将分步骤创建以下布局结构：

<body>
  <header>网站头部</header>
  <nav>主导航</nav>
  <div class="main-container">
    <main>主内容区</main>
    <aside>侧边栏</aside>
  </div>
  <footer>页脚</footer>
</body>

步骤 1：HTML 结构 - 搭建骨架

创建一个 index.html 文件，并写出基本的 HTML5 结构和我们的布局容器。

div css网页标准布局实例教程
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">Div + CSS 标准布局实例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="main-header">
    <h1>我的博客</h1>
  </header>
  <nav class="main-nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">lt;/a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
  <div class="content-wrapper">
    <main class="main-content">
      <article>
        <h2>文章标题 1</h2>
        <p>这里是文章的摘要内容，会显示在列表页...</p>
      </article>
      <article>
        <h2>文章标题 2</h2>
        <p>这里是另一篇文章的摘要内容...</p>
      </article>
    </main>
    <aside class="sidebar">
      <div class="widget">
        <h3>关于我</h3>
        <p>这是一个关于我的小部件。</p>
      </div>
      <div class="widget">
        <h3>最新文章</h3>
        <ul>
          <li><a href="#">文章标题 1</a></li>
          <li><a href="#">文章标题 2</a></li>
        </ul>
      </div>
    </aside>
  </div>
  <footer class="main-footer">
    <p>&copy; 2025 我的博客. 保留所有权利.</p>
  </footer>
</body>
</html>

步骤 2：CSS 样式 - 填充血肉

创建一个 style.css 文件,开始为我们的骨架添加样式。

1 初始化和全局样式

设置 box-sizing 和一些基本样式,让所有元素看起来更整洁。

/* style.css */
/* 1. 初始化 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 2. 全局样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}
a {
  text-decoration: none;
  color: #007bff;
}
ul {
  list-style: none;
}

2 头部和导航

使用 Flexbox 来轻松对齐头部和导航栏中的元素。

/* 头部样式 */
.main-header {
  background: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}
/* 导航栏样式 */
.main-nav {
  background: #444;
}
.main-nav ul {
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 水平居中 */
  padding: 0.5rem 0;
}
.main-nav li {
  margin: 0 1rem; /* 给列表项之间添加外边距 */
}
.main-nav a {
  color: #fff;
  font-weight: bold;
}
.main-nav a:hover {
  color: #ddd;
}

3 主内容区和侧边栏 - 布局核心

这是布局的关键部分，我们将使用 Flexbox 来创建一个两列布局。

.content-wrapper {
  display: flex; /* 使用 Flexbox 进行布局 */
  max-width: 1200px; /* 设置最大宽度 */
  margin: 2rem auto; /* 上下间距大，左右自动居中 */
  padding: 0 1rem; /* 左右内边距，防止内容贴边 */
  gap: 2rem; /* Flexbox 的间隙属性，替代 margin，更简洁 */
}
区 */
.main-content {
  flex: 3; /* 主内容占据 3 份空间 */
  background: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 侧边栏 */
.sidebar {
  flex: 1; /* 侧边栏占据 1 份空间 */
  background: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 文章和部件样式 */
article {
  margin-bottom: 2rem;
}
article h2 {
  margin-bottom: 0.5rem;
}
.widget {
  margin-bottom: 1.5rem;
}
.widget h3 {
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

解释：

  • display: flex; 将 .content-wrapper 变成一个 Flex 容器，其直接子元素（.main-content 和 .sidebar）会变成 Flex 项目。
  • flex: 3; 和 flex: 1; 是一个简写，相当于 flex-grow: 3; flex-shrink: 1; flex-basis: 0%;，它告诉浏览器，主内容区应该占据可用空间的三倍，侧边栏占一份，这样，无论屏幕多大，它们都会按 3:1 的比例分配空间。
  • gap: 2rem; 是一个非常方便的属性，它会在两个 Flex 项目之间创建一个 2rem 的间隙，比用 margin 更可控。

4 页脚

页脚很简单，我们可以用 Flexbox 或传统的居中方法。

/* 页脚样式 */
.main-footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

5 响应式设计

让我们的布局在手机上也能正常显示，当屏幕变窄时，我们不希望内容区和侧边栏并排显示,而是希望它们堆叠起来。

使用 媒体查询 来实现这一点。

/* 响应式设计 */
@media (max-width: 768px) {
  /* 当屏幕宽度小于等于 768px 时 */
  .content-wrapper {
    flex-direction: column; /* 将 Flex 方向从 'row' 改为 'column' */
  }
  .main-content,
  .sidebar {
    flex: 1; /* 两者都占据全部宽度 */
    width: 100%; /* 确保宽度占满 */
  }
}

解释：

  • @media (max-width: 768px) 是一个媒体查询，表示当浏览器窗口宽度小于或等于 768 像素时，应用内部的 CSS 规则。
  • flex-direction: column; 将 Flex 容器的方向从水平排列（默认 row）改为垂直排列（column）。
  • 这样，.main-content 和 .sidebar 就会从左右排列变成上下堆叠。

第三部分：进阶技巧与最佳实践

使用 CSS Grid 进行整体布局

虽然我们用 Flexbox 实现了内容区，但整个页面的布局（Header, Nav, Content, Footer）用 CSS Grid 会更直观。

我们可以修改 .content-wrapper 的父元素，body，让它成为一个 Grid 容器。

/* 在 style.css 的全局样式中修改 body */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
  display: grid; /* 将 body 变成 Grid 容器 */
  grid-template-rows: auto auto 1fr auto; /* 定义行高 */
  min-height: 100vh; /* 确保 body 至少和视口一样高 */
}
/* 然后给各个部分分配网格区域 */
.main-header { grid-row: 1; }
.main-nav { grid-row: 2; }
.content-wrapper { grid-row: 3; }
.main-footer { grid-row: 4; }
/* .content-wrapper 内部仍然可以用 Flexbox */
.content-wrapper {
  display: flex;
  max-width: 1200px;
  margin: 0 auto; /* 因为 Grid 已经处理了垂直居中，这里可以简化 */
  padding: 0 1rem;
  gap: 2rem;
}

这种布局方式被称为“圣杯布局”或“粘性页脚”，使用 Grid 可以非常简洁地实现,确保页脚始终在底部。

清除浮动（如果使用浮动）

如果你在旧项目中必须使用浮动，记得使用 clearfix 技术来清除浮动,防止父元素高度塌陷。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后将父元素的 class 设置为 clearfix。

语义化 HTML

虽然我们使用了 <div>，但在合适的地方使用语义化标签（如 <header>, <nav>, <main>, <article>, <aside>, <footer>）至关重要，这不仅能提高代码的可读性，对 SEO（搜索引擎优化）和可访问性也大有裨益。

恭喜你！你已经完成了 Div + CSS 标准布局的实例教程。

回顾一下我们学到的一切：

  1. 结构先行：用语义化的 HTML 标签（<div> 作为容器）搭建网页的骨架。
  2. CSS 重置：使用 box-sizing: border-box 和一些基本样式来统一浏览器的默认表现。
  3. 布局技术：
    • 使用 Flexbox 进行一维布局（如导航栏、内容区和侧边栏的排列）。
    • 了解 CSS Grid 在构建二维整体布局（如页头、内容、页脚）上的强大优势。
  4. 响应式设计：通过 媒体查询 改变布局方向（从 flex-direction: row 到 column）,以适应不同屏幕尺寸。
  5. 最佳实践：优先考虑现代布局技术（Flexbox/Grid），使用语义化标签,并注意代码的可维护性。

你可以基于这个模板，添加更多的样式和内容,创建出属于你自己的精美网页了！