- 网页分为三个部分：头部（head）、主体（mean）和边栏（aside）
- 页面布局框架由一组div元素组成，每个元素分别添加类名以作为配置元素
- 通过CSS设置box-sizing属性为border-box，并定义页面背景、头部背景等样式变量
- 设计页面以适应移动设备，使用媒体查询为大屏设备定制样式
- 采用CSS Grid布局定义网格的行和列，分别设置头部、主体和边栏的大小和位置
- 头部位置设为sticky，内外边距和背景颜色通过CSS变量调整
- 通过媒体查询，当浏览器窗口宽度超过640像素时，页面布局改变，侧边栏移至左侧，主体和头部相应调整位置和大小
- 测试浏览器中的页面布局有上中下三个部分，根据窗口宽度布局会变化