13.1 CSS排版观念

在本章中，我们将就固定宽度的网页布局进行深入的剖析，并给出一系列的实例，使读者能够自如地掌握这些布局方法。

在过去使用表格布局的时候，在设计的最开始阶段，就要确定页面的布局形式。由于使用表格来进行布局，一旦确定下来就无法再更改了，因此有极大的缺陷。使用css布局则完全不同，设计者首先考虑的不是如何分割网页，而是从网页内容的逻辑关系出发，区分出内容的层次和重要性。然后根据逻辑关系，把网页的内容使用div或其他适当的HTML标记组织好，再考虑网页的形式如何与内容相适应。lodidance.com

实际上，即使是很复杂的网页，也都是一个模块一个模块逐步搭建起来的。下面我们将举一些访问量非常大的网站为例，看看它们都是如何布局的。

一、MSN的首页

http://cn.msn.com/显示的是微软公司的msn.com的首页。msn.com是全世界访问量前3名的网站，内容繁多。从网页布局角度来说，其实并不复杂．可以简单地划分一下区域。这个网站是一个内容宽度固定，水平居中放置的页面，顶部是一组通栏的内容，它的下面分为左右两栏，各自独立，互不干扰。每一栏中都是依次排列各种图文内容。最下面是页脚，在图中没有显示，但是基本上所有网站的底部都会有一个页脚，放置版权信息等内容。

图1 抽象为“1-2-1”布局的示意图

这样的页面可以简单地抽象为如图1所示的页面样式。

对于这样的页面布局实际上我们已经制作过一个了，就是在前面11.4节学习制作圆角框中，实现的正是这种形式的页面。

为了便于称呼，本教程中使用统一的命名方式，此类型的页面布局称为“1-2-1”布局，“减号”表示竖直方向排列，即最上面是一列，它的下面分为两列，再下面又是l列的这种布局形式。

下面我们再列举几个著名站点的页面布局形式．进行一些简孽的分析，使读者先有一个感性的认识，然后再具体讲解各种布局形式的实现方法。

二、Yahoo.com

Yahoo.com是目前访问量排名第一的网站（alexa.com的排名数据），然而它的页面非常简洁。它的抽象出来的页面布局形式是一个典型的“1-3-1”布局。

http://cn.yahoo.com/

三、Times.com

Times.com也是一个新闻类的知名站点。由于信息内容类目繁多，因此它采用了“1-4-1”的布局形式，并且各分栏宽度不同，适应于不同类别的内容。

http://www.nytimes.com/

四、CNN.com

CNN,com使用的形式较前面几种布局方式稍有变化。可以看到在页面的顶部，仍是1列的形式；它的下面分为两列，左宽右窄；再接下来，左侧的部分又分为了两列。

http://www.cnn.com/

那么对这种方式我们如何称呼呢，本教程中约定这种方式称为“1—((1+2)+1)—1”的布局形式。这里的加号表示横向分割，括号表示组合。因此，上面的名称即可理解为最上面为1列，它的下面分为左右两列，其中左边的列的上侧是一列，下侧是两列，页面的最下侧是一个单列。

读者可以看到，这种标记方式比文字描述要简单清楚得多。

这里请读者思考，这个页面为什么是“1—((1—2)+1)—1”结构，而不是“1-2-3-1”结构。答案是，如果是“1-2-3-1”结构，那么2列部分和3列部分之间，应该存在一条横向贯穿页面的分割线，而圈中不存在这样的分割线，因此它不是“1-2-3-1”结构。

五、163.com

前面举了几个国外同站的例子，下面再来看看国内163.com的首页布局情况。163.com的页面大体上是一个两栏布局，但是中间穿插一些单列的内容，通常是用来发布广告的位置。

http://www.163.com/

因此这种结构可以写作“1—(2—1)*”结构，这里的星号表示重复1次或多次。

为了使读者能够快速地掌握页面结构的分析方法，请读者自己思考一下它们的结构表达式。

一种结构表达式应该是“2-1-(1+(2-1)）”，另一种结构表达式应该是"1-（（2-1-2）+1）-1”。

在了解了一些常见的布局结构以后，下面就可以开始正式学习如何制作各种布局的页面了。

注意：本章的学习目的是掌握如何以整页为对象进行布局，页面的各个组成部分应该事先已经准备好，否则大量的代码将用于局部的样式，这样学习起来就会非常困难。因此，在本章中，将以前面第11章圆角框一章制作的案例为基础，具体来说是使用的是圆角框中的不同定宽度带边框的案例，该案例中实现的圆角框可以方便地嵌入任何页面。作为页面的一个组成部分。

在学习本章之前，读者务必已经掌握该圆角框的制作原理和使用方祛。本章中的部分案例是由多个圆角框组成的，导致页面代玛很长，如果不熟悉圆角框部分的代码，分析代码时就会比较吃力。因此先掌握圆角框的做法，再学习本章将会事半功倍。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表