页面分成三个部分，头部，边栏还有主体。在网页文档里先准备一下页面布局框架需要的元素。

先用一组 div，元素上添加一个类，名字是 page，元素里直接包装的东西就是页面布局框架，一组 header 元素，页面头部里的东西可以放在这个包装里。同一级别，再添加一组 main，页面的主体内容可以放在这个元素里。同一级别再添加一组 aside，页面的边栏可以放在这个元素里。

样式表

打开页面的样式表，用通用选择器写一段样式，把 box-sizing 统一设置成 border-box。下面再用 :root 这个伪类作为选择器，在里面定义几个变量。添加一个 --page-background ，值是 lavender 这种颜色，再定义一个 --page-main-background，值是 *white，然后是 --page-header-background，值是 lavender，再添加一个 --page-aside-background ，变量的值是 lavender，再添加一个 --skeleton-object-background，值是 orchid。

下面用 body 作为选择器写一段样式，把 margin 设置成 0，去掉元素的外边距。再用 background 把元素的背景颜色设置成 --page-background 这个变量表示的颜色值。

.page

用移动设备优先的方法设计页面，需要先让页面适应移动设备，然后通过媒体查询给大尺寸的设备设计样式。

用 .page 作为选择器写一段样式，把元素的 display 设置成 grid，使用 CSS 的网格布局，下面用 grid-template-rows 设计一下网格的行，可以分成三行，第一行高度是 64 像素，第二行的高度设置成 1fr，第三行的高度也设置成 64 像素。下面用 min-height，把元素最小高度设置成 100vh，就是高度至少要跟可视区域一样。

这样网格里的第一行应该是 header，第二行是 main，第三行是 aside。

header

下面用 .page > header 作为选择器，把页面头部的 position 设置成 sticky ，top 是 0 ，再用 padding 添加点内边距，上下是 0，左右是 24 像素，然后用 background 把背景颜色设置成 --page-header-background 这个变量表示的值。

复制一份这段样式，选择器改成 .page > aside，改一下边栏的背景颜色，用一下 --page-aside-background。

main

然后用 .page > main 作为选择器，把页面主体的背景颜色设置成 --page-main-background，用 padding 在元素四周添加 24 像素的内边距。 为了演示滚动页面，我们暂时可以先把页面主体最小高度设置成 200vh，也就是 2 倍的可视区域的高度。

修改一下 .page > aside 这块样式，把 top:0 改成 bottom:0 。

预览

现在页面的顶部是页面头部，高度是 64 像素，中间是页面主体，底部是页面边栏，高度是 64 像素。滚动页面的时候，页面头部还有边栏都会固定在原本的位置上。

@media

下面可以设计一下大尺寸设备的页面布局，写一段媒体查询，@media，媒体特性是 min-width: 640px，这样可视区域宽度大于 640 像素，就会使用这组样式。

这里再用 .page 作为选择器，重新划分一下页面网格，grid-template-rows 分成两行，第一行高度 64 像素，第二行是 1fr，再用 grid-template-columns 划分一下网格的栏，分成两栏，第一栏是 96 像素，第二栏是 1 fr。

为了让边栏在页面左边显示，我们需要单独设置一下它在网格里的位置，用 .page > aside 作为选择器写一段样式，先把 top 设置成 0 。然后把 grid-row 的值设置成 1 / 3，再把 grid-column 的值设置成 1 / 2 。 max-height 设置成 100vh，规定这个边栏高度最大不能超过可视区域的高度。

在浏览器测试一下，现在页面分成上中下三个部分，调整浏览器窗口的宽度，超过 640 像素以后，页面布局会发生变化，最左边是边栏，右边的顶部是页面头部，下面是页面主体。