先观察一下我们的这个页面布局的线框图，这个页面分成了几个部分，上面这块是 header 部分，在这里可以放一些工具按钮之类的东西，左边儿是 aside，应用的主要导航可以放在这块地方， 然后还有一个 main 区域，这里面是应用的主要内容。

现在我们可以按照这个设计去组织一下页面的结构，打开 layout 这个网页，先用一组 div 元素，在这个容器里可以包装整个应用。在这个容器上面添加一个 page 类。

在这个 page 里面再嵌套页面上的其它东西，比如 header，用一个 div 元素，上面加上 page__header，再添加一个 div，上面加上 page__aside ，最后再用一个 div，上面加上 page__main 。

一会儿我们可以使用这些类去添加一些样式。 在 page 容器里包装的这三个容器，它们是兄弟关系。page 这个容器是它们的爸爸。

在 assets，css 的下面新建一个样式文件，名字叫 wireframe.css 。 回到 Layout 文档，在 head 标签里，把刚才创建的 wireframe 这个样式嵌入进来。把它放在 page 样式表的上面，normalize 样式表的下面。

打开这个样式表，在里面添加点样式。 设置一下 page__header 的样式，用 background 设置一下它的背景颜色。这个颜色值可以直接在设计文档这里，选中 header 以后，打开这个填充，然后复制一下这里的颜色值。用它作为这个 background 属性的样式。

下面再给 page__aside 添加一个背景颜色的样式，用 background 属性设置一下，这个颜色值也可以在设计文档里复制一下。

然后再设置一下 page__main 的样式， 用 background 设置一下它的背景颜色，颜色值可以在设计文档里复制，把它交给 background 属性。

现在页面上会出现这三块东西，它们会叠加在一起，黄色这块是页面的 header，粉色是页面的 边栏，蓝色是页面的主体部分。