2.3 理解CSS定位与DIV布局

CSS定位与DIV布局中心思想就是要实现结构与表现分离。刚开始理解结构和表现的分离可能有点困难，特别是在还不习惯于思考文档的语义和结构的时候。理解这点非常重要，因为，当结构和表现分离后，用CSS文档来控制表现就是一件很容易的事了。例如，某一天发现网站的字体太小，只要简单地修改样式表中的一个定义就可以改变整个网站字体的大小。

大家都知道，内容是结构的基础。内容在一定程度上体现出结构，但并不是全部结构。原始内容就相当于未经处理的数码相片的RAW格式，但是，即使未经处理的内容，也包含一定的结构。比如通过阅读一段文字，可能包含标题、正文、段落（这些属性是通过阅读而发现的，而不是从表现上）等，这就是结构。为了区分内容体现出来的结构，把它称为内结构，也称内容结构。

互联网的基础是网页和超链接，超链接形成了页面流。而页面流也是结构的一部分，它是交互设计的重点，也就是对Request（请求）和Respond（响应）的处理。这里谈到的结构是不可能由内容体现出来的，因此可以将其称为外结构，也称交互结构。

Web站点的结构就是由内结构和外结构一起形成的，这个结构是所有表现的基础。没有这个结构就不会有表现。结构并不是wireframe, wireframe是结构的一种可视化表现，是开发流程中的沟通工具。从内容到结构到表现，也是大部分网站设计的流程。

随便打开一个网页或者回想一下曾经访问过的网页，传统的网站前端展现方式是把结构和表现混合在一起，而应用Web标准进行设计的方式是把结构和表现分离开。但是不管使用什么方式，它们表面看上去都差不多。

例如，下图所示为一个商城的主页。

当单击主页上的产品名称后，转到超级链接的商品详细信息页面，如下图所示。

页面上部包括导航都是一致的。如果在页面的样式表中更改导航字体大小，则各个页面中导航页面字体的大小统一被修改，即修改如下样式表的内容。

globalHead_navCenterul li{float:left; display:inline; width:auto; height:51px; font-size:14px; line-height:22px; background:url("images/newPublic_navLine.gif") right center no-repeat; }改为．globalHead_navCenterul li{float:left; display:inline; width:auto; height:51px;font-size:16px; line-height:22px; background:url("images/newPublic_navLine.gif") right center no-repeat; }

HTML本身就是一种结构化的语言。外观并不是最重要的，网页的表现可以不仅仅依赖HTML来完成，完全可以使用其他CSS+DIV来完成。就像上面的例子中，使用了<DIVclass="globalHead_navCenter">和</DIV>标签来完成字体颜色的变化。不用再像以前一样，把装饰的图片、字体的大小、页面的颜色甚至布局的代码都堆在HTML里面，对于HTML，更多的是要考虑结构和语义。