Chapter 01 · 网站页面如何布局

01

LAYOUT BASICS

什么是网页布局？

网页布局，是对页面中不同信息区域进行组织和排列的方式。它决定用户先看到什么，以及如何在内容之间移动。

贯穿案例 · CHAPTER 01

本节案例决策

先定义课程门户的信息优先级，再决定页面区域。

贯穿案例

为《可视化导论》设计一个清晰、可扩展的课程门户

案例目标

学生进入网站后，应能在 5 秒内理解课程主题、找到章节入口，并在手机与电脑上顺利学习。

设计约束

章节会持续增加；讲解、代码和演示必须保持同一学习路径；主内容永远比辅助信息更突出。

核心概念

布局不是“把元素摆好看”，而是建立信息秩序

当用户打开网页时，通常会先确认“这是什么”，再寻找“我能做什么”，最后阅读具体内容。网页布局把这些信息按重要程度分组，并通过位置、大小、间距和对齐建立清晰的阅读路径。

因此，布局设计首先解决的是内容关系，其次才是视觉装饰。同一组内容可以使用不同布局，但每一种选择都应该服务于用户任务。

信息架构

先确定内容的分组、命名与优先级，再把它们映射到 Header、Main、Aside 等页面区域。

视觉层级

通过位置、尺寸、对比和留白，把“课程是什么 → 去哪里学习 → 当前学什么”变成稳定的浏览顺序。

课堂要点先画区域，再写样式。先确定主次关系，再决定使用 Flexbox 还是 Grid。

H

Header

说明网站身份，放置品牌和全局操作。

N

Navigation

建立方向感，帮助用户在页面之间移动。

M

Main

承载当前页面唯一且最重要的核心内容。

S

Sidebar

提供目录、筛选器或相关信息等辅助内容。

F

Footer

放置版权、联系信息和次级导航。

为什么要分区？

分区会降低用户一次需要处理的信息量，也让后续响应式重排更容易。

先问三个问题

谁是主角？哪些内容相关？用户下一步要去哪里？

常见误区

把所有区域都做得同样醒目，会让页面失去视觉焦点。

layout.css

/* 用命名区域表达页面结构 */
.page {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

代码拆解

让 CSS 与页面结构使用同一种语言

三列轨道
左侧导航固定 220px，主内容占剩余空间，右侧信息栏固定 260px。
命名区域
grid-template-areas 让布局关系一眼可读。
完整视口
min-height: 100vh 保证短内容页面也能铺满屏幕。

注意这是桌面结构，窄屏还需要通过 Media Query 把三列改成一列。

02

SEMANTIC HTML

HTML 页面基本结构

语义化标签像一张内容地图：让浏览器、搜索引擎和读屏软件都能读懂页面。

贯穿案例 · CHAPTER 01

本节案例决策

用语义化结构描述课程门户，让内容脱离样式后仍然可读。

语义化 HTML

标签名称应该说明内容的职责

<div> 只表示一个容器，而 <nav>、<main> 和 <aside> 会告诉浏览器“这里是什么”。清晰的语义结构有利于无障碍访问、搜索引擎理解和团队协作。

语义标签不会自动产生复杂布局；它们负责结构，CSS 负责视觉排列。把这两层分开，页面才容易维护。

判断方法暂时删除所有 CSS，如果 HTML 仍然具有清楚的阅读顺序，结构通常就是合理的。

<header>

页面或区域的开头，通常放标题与品牌。

<nav>

包含页面中的主要导航链接。

<main>

每个页面唯一的主体内容容器。

<section>

将相关主题组织成有标题的内容区。

<aside>

与主内容相关但可独立存在的补充区。

<footer>

页面或区域末尾的来源与补充信息。

一个页面一个 main

主体内容应唯一，方便辅助技术快速定位页面核心。

section 需要主题

通常应有标题；如果只是为了套样式，使用 div 更合适。

常见误区

不要根据默认外观选标签，应根据内容职责选择标签。

index.html · 文档树

html
├── head
└── body
    ├── header
    ├── nav
    ├── main
    │   ├── section
    │   └── aside
    └── footer

index.html · 可运行骨架

<body>
  <header>
    <h1>网站名称</h1>
  </header>
  <nav aria-label="主导航">...</nav>
  <main>
    <section aria-labelledby="intro">
      <h2 id="intro">内容标题</h2>
      <p>页面的主要内容。</p>
    </section>
    <aside>相关资料</aside>
  </main>
  <footer>版权信息</footer>
</body>

03

LAYOUT PATTERNS

常见网页布局方式

选择一种布局卡片，观察同一组内容如何被重新组织。布局没有绝对优劣，关键在于内容关系。

贯穿案例 · CHAPTER 01

本节案例决策

比较同一批课程内容的不同布局，选择最符合学习任务的模式。

01

单栏

阅读路径最直接，适合文章、介绍页和移动端内容。

重点：控制正文宽度，避免一行过长。

02

双栏

主内容搭配目录或侧边信息，适合文档、博客和后台。

重点：主栏必须明显宽于辅助栏。

03

三栏

同时容纳导航、内容与补充信息，适合复杂工作台。

重点：小屏必须折叠或重排。

04

网格

按行列展示同类项目，适合作品集、商品与数据面板。

重点：项目之间应具有可比较性。

05

卡片

将信息拆成独立单元，方便浏览、排序和响应式换行。

重点：卡片内部结构保持一致。

如何选择？连续阅读选单栏主辅关系选双栏二维内容选网格

常用布局配方.css

/* 单栏：限制阅读宽度 */
.article { max-width: 720px; margin: auto; }

/* 双栏：辅助栏 + 弹性主栏 */
.two-column {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
}

/* 响应式网格：自动增减列数 */
.card-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

关键点解释

稳定尺寸与弹性空间组合使用

minmax(0, 1fr)
允许主栏真正缩小，避免长内容撑破容器。
auto-fit
浏览器根据可用宽度自动决定列数。
gap
统一管理项目间距，比为每个项目写 margin 更稳定。

常见坑不要依赖固定像素宽度拼满页面，否则在不同屏幕上容易溢出。

04

CSS LAYOUT

CSS 布局方法

从默认文档流，到一维排列，再到二维网格：选择与问题维度匹配的工具。

贯穿案例 · CHAPTER 01

本节案例决策

根据问题是一维还是二维，选择 Normal Flow、Flexbox 或 Grid。

01default

Normal Flow

元素按照 HTML 顺序自然排列，是所有页面布局的起点。

适合：文章、表单、基础内容

02display: flex

Flexbox

沿一个主轴控制元素的方向、对齐与空间分配。

一维布局 · 行或列

03display: grid

CSS Grid

同时控制行和列，擅长构建完整页面或规则矩阵。

二维布局 · 行与列

Normal Flow

先让内容自然排列，再对真正需要的区域增强布局。

Flexbox

控制一行或一列项目之间的对齐与空间分配。

Grid

先定义整体行列，再把内容放入二维轨道。

01 · NORMAL FLOW

<article>
  <h2>标题</h2>
  <p>段落自然向下排列</p>
</article>

无需声明 display，块级元素按文档顺序排列。

02 · FLEXBOX

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

适合导航、按钮组或需要沿单轴对齐的项目。

03 · CSS GRID

.dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

适合同时规划行与列的页面级布局。

选择口诀自然阅读用 Flow；一条轴用 Flex；同时考虑行和列用 Grid。

05

INTERACTIVE LAB · 01

Flexbox 可视化演示

点击属性值，观察三个项目在主轴与交叉轴上的位置变化。

贯穿案例 · CHAPTER 01

本节案例决策

用 Flexbox 排列课程导航，并验证主轴与交叉轴的对齐。

一维布局

Flexbox 一次重点处理一条轴

为父容器设置 display: flex 后，直接子元素成为 Flex Items。默认主轴从左向右，交叉轴从上向下。

justify-content 控制主轴上的空间分配；align-items 控制项目在交叉轴上的对齐。理解这两条轴，比背属性值更重要。

MAIN AXIS →justify-content

start · center · space-between · space-around

CROSS AXIS ↓align-items

flex-start · center · flex-end · stretch

容器属性

display、flex-direction、justify-content 和 align-items 写在父元素上。

项目属性

flex-grow、flex-shrink、flex-basis 和 align-self 写在子元素上。

常见坑

没有可分配的剩余空间时，justify-content 的变化可能看不出来。

flex-demo.html

<div class="toolbar">
  <button>A</button>
  <button>B</button>
  <button>C</button>
</div>

<style>
.toolbar {
  display: flex;
  min-height: 180px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
</style>

关键点解释

属性为什么写在父容器上？

建立布局上下文
display: flex 只影响直接子元素。
制造可观察空间
min-height 让交叉轴有空间展示不同对齐效果。
保留稳定间距
gap 只作用于项目之间，不会在容器边缘制造额外空白。

调试提示先给容器加边框，确认它的真实尺寸，再调整对齐属性。

06

INTERACTIVE LAB · 02

Grid 可视化演示

改变列轨道的定义，比较等分列、比例列和三列网格的空间分配。

贯穿案例 · CHAPTER 01

本节案例决策

用 Grid 组织章节卡片，让重点章节与普通章节共享稳定轨道。

二维布局

Grid 先建立轨道，再放置内容

CSS Grid 同时处理横向的列与纵向的行。父容器负责定义轨道，子元素会依次进入网格单元，也可以用列线、行线或命名区域精确定位。

fr 表示一份“剩余可用空间”。1fr 2fr 不是整个容器的 1:2，而是扣除固定尺寸和间距后，再按 1:2 分配剩余空间。

Track两条网格线之间的行或列

Cell一行与一列交叉形成的单元

Gap轨道之间统一的空隙

fr剩余空间的弹性份额

适合页面骨架

侧栏、主内容和信息面板可以同时受行列控制。

适合同类矩阵

卡片、图表和图片可以形成稳定且响应式的网格。

常见坑

内容最小宽度可能撑破 1fr，必要时使用 minmax(0, 1fr)。

grid-demo.css

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 让重点卡片横跨两列 */
.gallery .featured {
  grid-column: span 2;
}

/* 自动适配较窄的屏幕 */
@media (max-width: 720px) {
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery .featured { grid-column: auto; }
}

关键点解释

列定义决定空间分配规则

repeat(3, 1fr)
创建三个等宽弹性列。
span 2
让重点项目占据两个连续网格轨道。
窄屏归一列
不仅改变容器列数，也要取消项目跨列规则。

调试提示浏览器开发者工具可以直接显示网格线与轨道编号。

07

DESIGN PRINCIPLES

页面布局设计原则

技术搭起骨架，原则让页面真正清晰、稳定且易于使用。

贯穿案例 · CHAPTER 01

本节案例决策

用对齐、留白、层级和一致性优化课程卡片，而不是只做装饰。

接近性原则

人会把距离较近的元素理解为一组。间距不是空出来的地方，而是在表达“谁和谁有关”。

渐进式披露

先展示完成当前任务所需的信息，把低频设置与补充说明放到更深层级，降低首屏认知负担。

01

对齐 Alignment

让相关元素共享视觉基准线，建立秩序。

02

留白 Spacing

用空间区分关系，让内容获得呼吸感。

03

层级 Hierarchy

通过尺寸、位置与色彩引导阅读顺序。

04

一致性 Consistency

重复稳定规则，降低用户的理解成本。

关系近，距离近

间距可以直接表达信息是否属于同一组。

重要内容先被看见

尺寸、字重、色彩和位置共同建立视觉层级。

检查方法

眯眼看页面：如果仍能分辨主次，层级通常是清楚的。

design-tokens.css

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --radius-card: 24px;
  --text-main: #111111;
  --text-muted: #667085;
}

.card {
  padding: var(--space-3);
  border-radius: var(--radius-card);
}

.card h3 { margin: 0 0 var(--space-1); }
.card p  { margin: 0; color: var(--text-muted); }

关键点解释

用规则保证一致，而不是凭感觉重复调整

间距阶梯
8 的倍数让页面节奏稳定，也更容易沟通。
统一圆角
相同层级的卡片共享一个设计变量。
文本层级
正文和辅助文字保持稳定色彩关系。

收益修改一个变量即可同步更新整个网站，为后续章节扩展打好基础。

08

RESPONSIVE DESIGN

同一个页面，不同的屏幕

Media Query 让布局根据可用宽度自动调整。拖动下方滑块，观察内容如何重排。

贯穿案例 · CHAPTER 01

本节案例决策

让课程门户在桌面、平板和手机上保持同一内容优先级。

响应式设计

不是缩小桌面网页，而是重新安排内容

屏幕变窄时，可用空间减少，但内容的重要性没有改变。响应式设计会根据空间调整列数、导航形式、字号和间距，让相同内容在不同设备上仍然容易阅读和操作。

推荐从 Mobile First 开始：先完成最小屏幕的核心任务，再通过 min-width 媒体查询逐步增加布局能力。

设计原则断点应该由内容何时“放不下”决定，而不是只记住某个设备型号。

≤ 767pxMobile

单栏、触控友好、隐藏次要装饰。

768–1023pxTablet

两列或折叠侧栏，保留核心工具。

≥ 1024pxDesktop

多栏布局，充分利用横向空间。

内容优先

核心内容在所有屏幕都应存在，不要只为桌面设计。

触控尺寸

移动端按钮需要足够大的可点击区域与间距。

常见坑

只改变宽度却不重排内容，会得到拥挤的“缩小版桌面”。

responsive.css

/* Mobile First：默认单栏 */
.course-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 平板：增加辅助栏 */
@media (min-width: 768px) {
  .course-layout {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
}

/* 桌面：限制整体宽度 */
@media (min-width: 1200px) {
  .course-layout {
    max-width: 1180px;
    margin-inline: auto;
  }
}

关键点解释

基础样式服务所有设备，增强样式逐层覆盖

默认单栏
即使媒体查询失效，小屏仍能正常阅读。
从 768px 增强
空间足够时再引入侧栏，不影响核心内容顺序。
限制最大宽度
避免超宽屏上的段落和卡片被无限拉伸。

别忘记HTML 需要设置 viewport meta，否则移动浏览器不会按真实设备宽度渲染。

网站页面 如何布局？

什么是网页布局？

为《可视化导论》设计一个清晰、可扩展的课程门户

布局不是“把元素摆好看”，而是建立信息秩序

Header

Navigation

Main

Sidebar

Footer

让 CSS 与页面结构使用同一种语言

HTML 页面基本结构

标签名称应该说明内容的职责

常见网页布局方式

单栏

双栏

三栏

网格

卡片

稳定尺寸与弹性空间组合使用

CSS 布局方法

Normal Flow

Flexbox

CSS Grid

Flexbox 可视化演示

Flexbox 一次重点处理一条轴

属性为什么写在父容器上？

Grid 可视化演示

Grid 先建立轨道，再放置内容

列定义决定空间分配规则

页面布局设计原则

对齐 Alignment

留白 Spacing

层级 Hierarchy

一致性 Consistency

用规则保证一致，而不是凭感觉重复调整

清晰的页面布局

网页结构

同一个页面，不同的屏幕

不是缩小桌面网页，而是重新安排内容

基础样式服务所有设备，增强样式逐层覆盖

你已经掌握

网站页面
如何布局？