今天给大家写一个页面布局的方式，帮助大家更清晰的认识页面布局，方式仅供参考。

首先给大家看一下我的文件夹及文件

文件

这里有一个base.css文件，这个css文件主要用来存放一些可以重复使用的样式。

base.css内容

从图片中我们可以看到很多的样式都是通过class定义的，在需要用到这些样式的时候可以直接在html文件的class中添加class名。拿取很方便，这个文件也可以在以后不断的添加内容作为一个通用的库来使用。

接着就是页面布局，下面是html文件的内容。

html

从这张图就可以清晰的看到base.css文件的运用。充分展现了样式与结构的分离，且提高了html文件的理解，保留了html文件的整洁。

再看看这个页面的css文件内容。

css

结合html和css，可以看到整个页面的结构逐渐清晰，并且以某种颜色的区域占据网页，直观的展现了网页的初步轮廓。

这样做的好处不言而喻，它整个结构非常清晰，且环环相扣，每一个模块都是独立的，且紧密的拼构成一个完整的页面，避免了模块之间的相互影响。对页面的修改也很方便，利于后期的维护。对程序员编写代码也有一个清晰的思路。

最后就是这个页面布局的效果图。

效果图