实例解析CSS网页布局原理

源代码网整理以下DIV+CSS布局

源代码网整理以下用CSS来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。

源代码网整理以下你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。

源代码网整理以下定位

源代码网整理以下定位属性position用于定义一个元素是否absolute(绝对)，relative(相对)，static(静态)，或者fixed(固定)。

源代码网整理以下static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。

源代码网整理以下relative很像static，但可用top、right、bottom和left属性来偏移原始位置。

源代码网整理以下absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。

源代码网整理以下fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。但这个只在Mozilla和Opera中支持，IE中不支持。

源代码网整理以下用绝对定位布局

源代码网整理以下可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则:

源代码网整理以下并且应用如下的CSS:

源代码网整理以下#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }

源代码网整理以下你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。

源代码网整理以下实在是太容易了!然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，可以为HTML增加“navigation2”块并且应用如下CSS:

源代码网整理以下#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ }

源代码网整理以下 源代码网供稿.