网页制作教程：用CSS实现网页布局

时间：2022-07-02 13:03:58 编辑：袖梨来源：一聚教程网

　　页面布局
　　用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不会。
　　用绝对定位布局

代码如下	复制代码
This That The Other Ra ra banjo banjo Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. (Ra ra banjo banjo)

　　你可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则:
　　并且应用如下的CSS:

代码如下	复制代码
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }

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

推荐专题

最新下载

热门教程

网页制作教程：用CSS实现网页布局

Ra ra banjo banjo

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程