第 3 周：PC 端网页综合布局

本周目标

本周完成后，应能够：

• 按“分析设计、划分区域、搭建结构、编写样式、对照调试”的流程制作 PC 网页
• 使用版心和公共样式保持多个区域的一致性
• 正确选择相对、绝对和固定定位
• 使用字体图标、精灵图和过渡效果完善页面细节
• 组织重复卡片和公共区域，减少无意义的重复代码
• 使用蓝湖提供的标注和素材完成官网 PC 端主要区域

学习资料与范围

• 主课程：HTML5+CSS3+移动 Web 视频教程
• 视频范围：P81-P130

视频中的项目只用于观察实现步骤，不要求下载课程素材或完成对应案例。所有编码实践均使用提供的官网蓝湖设计图和可导出资源。

需要掌握的知识点

页面分析与组织

• 从截图或设计图识别版心、通栏、公共区域和重复模块
• 先搭建 HTML 结构，再完成布局，最后处理视觉细节
• 按页面区域拆分 CSS，避免选择器互相影响
• 为导航、卡片、标题区和按钮等重复结构提取公共类
• 图片和图标资源的分类、命名和引用

定位与层叠

• 相对定位保留原位置的特点
• 绝对定位的包含块和“子绝父相”
• 固定定位相对视口的行为
• z-index 生效条件和层叠顺序
• 定位居中、角标、悬浮按钮和覆盖文字
• 避免使用绝对定位承担整个页面主体布局

页面细节技术

• CSS 精灵图的定位方式和适用场景
• 字体图标的引入和使用
• 图片与文字的垂直对齐
• opacity、光标类型和悬停反馈
• transition 的属性、时长和触发方式
• 静态轮播图区域的结构和层叠关系

工程基础

• 项目目录、公共 CSS 和页面 CSS
• title、description、keywords 等基础页面信息
• Favicon 的配置
• Header、导航、搜索、购物车和 Footer 等公共区域
• 长页面中的样式复用和命名一致性

必做练习

1. 分析官网蓝湖设计图，整理页面清单、版心、公共区域和重复模块。
2. 使用蓝湖导出的 Logo、图片和图标完成官网 Header、导航和 Banner。
3. 完成设计图中的主要内容区域、重复卡片和 Footer。
4. 根据设计图中的元素完成固定按钮、角标或覆盖文字；设计图没有对应元素时不强行添加。
5. 为设计图中具有交互含义的导航、按钮或卡片补充合理的悬停过渡效果。
6. 检查官网页面中的重复样式，至少完成一次公共样式整理。

本周综合任务

根据官网蓝湖设计图，完成一个 PC 页面中的 Header、全部主要内容区域和 Footer。

要求：

• 编码前先画页面结构草图
• 不使用视频课程的源码和素材
• 页面资源均来自蓝湖设计图或蓝湖导出文件
• 公共区域和重复卡片样式得到复用
• 版心、布局、间距和对齐符合蓝湖标注
• 能够解释每处定位的参照对象和使用原因

本周产出

• 官网蓝湖设计图页面清单和结构草图
• 官网 PC 端公共头部、主体区域和页脚
• 使用蓝湖元素完成的定位与悬浮效果组件
• 一次公共样式和重复组件整理记录
• 一份 PC 网页制作流程总结

完成检查

• 已完成官网蓝湖设计图要求的 PC 端主要区域
• 页面图片、图标和文字资源均来自蓝湖设计图或导出文件
• 能够正确选择相对、绝对和固定定位
• 能够组织公共样式和重复卡片样式
• 能够从蓝湖设计图中划分结构和布局层次
• 未依赖课程源码或课程配套素材