logo

该视频仅会员有权观看

立即开通课程「Web前端页面基础」权限。

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