简单学习CSS实现网页布局的基础知识

时间：2022-07-02 12:57:16 编辑：袖梨来源：一聚教程网

　　使用CSS布局非常简单，如果你习惯使用tables布局，可能开始时有点困难，但其实很容易，事实上只是观念的不同。
　　你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。
　　Positioning 定位
　　positon属性可以指定元素为absolute,relative,static或是fixed。
　　static是元素默认属性，按HTML出现的先后顺序。
　　relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。
　　absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。
　　fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。
　　使用绝对定位布局
　　可以使用绝对定位创建传统的两列布局，如下：

代码如下	复制代码
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)

　　上面加上CSS：

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

　　上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。

推荐专题

最新下载

热门教程

简单学习CSS实现网页布局的基础知识

Ra ra banjo banjo

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程