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中不支持。
用绝对定位布局
以下为引用的内容:
<div id="navigation"> |
并且应用如下的CSS:
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 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 */ }
平顶山网站制作 369互联编辑