项目9：页面布局
黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰
🎯 教学目标
知识目标

掌握DIV+CSS3布局特点，理解单列/双列/三列布局原理，掌握弹性盒子基本用法。

能力目标

具备编写DIV+CSS3布局代码能力，能独立实现复杂页面的结构搭建与样式控制。

素质目标

培养严谨工作态度、审美素养及团队协作精神，提升解决技术难题的能力。

🚩 任务1：制作“龙江商城”布局页面
💡 任务分析： 页面总体属于三列布局形式。先从上至下按单列划分一级区块（Header, Wrapper, Footer）， 再对Wrapper进行详细划分（左侧、中间、右侧）。使用浮动定位方法实现多列布局。

🛠️ 实施步骤

  1. 结构搭建： 创建 HTML5 基本结构，构建 Header、Nav、Section、Aside、Footer 等语义化标签。
  2. 一级划分： 将页面分为头部（通栏）、主体（居中容器）和页脚（通栏）。
  3. 二级划分： 在主体容器内划分左、中、右三列区块。
  4. CSS 样式： 使用 float: left 和 float: right 实现三列并排布局。
  5. 居中处理： 利用 margin: 0 auto 使主体内容在大屏下居中显示。
🏷️ 核心知识：HTML5语义化标签

为了替代传统的 <div id="header"> 这种无语义写法，HTML5 引入了新的结构标签，使代码更清晰、利于SEO。

标签 含义 说明
<header> 页眉/头部 通常包含Logo、导航、搜索框等。
<nav> 导航栏 包含主要的导航链接区域。
<section> 区块/节 定义文档中的一个区域，强调分块。
<article> 独立文章 比section更独立，如新闻、博客。
<aside> 侧边栏/附属信息 通常作为主要内容的附属信息展示。
<footer> 页脚/底部 包含版权信息、联系方式等。
📐 核心知识：多列布局方式
1. 单列布局 (Single Column)

最基础的布局，从上到下排列：Header -> Nav -> Content -> Footer。通常宽度 100%。

2. 双列布局 (Two Column)

在单列基础上，将 Content 区域划分为两部分。常见形式：主内容区 (Main) + 侧边栏 (Aside)。
CSS实现： 左侧 float: left，右侧 float: right 或使用 margin 预留空间。

3. 三列布局 (Three Column)

内容更丰富的布局。通常结构：左侧菜单 + 中间主内容 + 右侧广告/推荐。
CSS实现： 左中右三列分别设置宽度，并使用浮动定位。

🚩 任务2：制作“杂志封面展示”页面
💡 任务分析： 使用弹性盒子 (Flexbox) 布局实现图片的自动排列与对齐，并添加鼠标悬停 (Hover) 过渡动画，提升交互体验。

🛠️ 实施步骤

  1. 准备素材： 收集6张杂志封面图片，放入 img 文件夹。
  2. HTML结构： 创建一个容器 DIV 和6个子 DIV 项目，内部放入 IMG 标签。
  3. 启用Flex： 在容器上设置 display: flex。
  4. 设置对齐： 使用 justify-content 和 align-items 控制主轴和交叉轴对齐方式。
  5. 悬停效果： 使用 transition 属性实现鼠标指针悬停时图片宽度平滑变化的效果。
🔄 核心知识：弹性盒子 (Flexbox)

弹性盒子布局（Flexible Box）是 CSS3 提供的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。

1. 容器属性 (父元素)
  • flex-direction: 决定主轴方向（row, column）。
  • flex-wrap: 决定是否换行（nowrap, wrap）。
  • justify-content: 主轴对齐方式（center, space-between）。
  • align-items: 交叉轴对齐方式（flex-start, center, stretch）。
2. 项目属性 (子元素)
属性 说明
order 定义项目的排列顺序，数值越小越靠前
flex-grow 定义项目的放大比例，默认为0（不放大）
flex-shrink 定义项目的缩小比例，默认为1
align-self 允许单个项目与其他项目有不一样的对齐方式
📝 随堂测试

请完成以下单选题，检验本节课的学习成果：

1. 在 HTML5 中，通常用于定义页面导航区域的标签是？
2. 要让一个容器成为弹性盒子（Flex容器），需要设置哪个 CSS 属性？
3. 在 Flexbox 弹性盒子布局中，用于设置主轴对齐方式的属性是？
📌 课堂总结

本节课我们系统学习了网页布局的核心技术，主要掌握了以下三大模块：

  • HTML5 语义化标签： 使用 <header>、<nav>、<section>、<footer> 等标签构建清晰的页面结构。
  • 传统多列布局： 掌握了利用浮动（Float）实现单列、双列及三列经典布局的方法。
  • Flexbox 弹性盒子： 理解了主轴与交叉轴的概念，能熟练使用 justify-content 和 align-items 进行灵活的对齐与排列。

💡 重点提示： 传统浮动布局适合固定结构的页面，而 Flexbox 更适合现代响应式开发。课后请多加练习，熟练掌握这两种布局方式的切换与配合！