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

　　使用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以下的浏览器不支持。
　　使用绝对定位布局
　　可以使用绝对定位创建传统的两列布局，如下：
<div id="navigation">
      <ul>
     <li><a href="this.html">This</a></li>
     <li><a href="that.html">That</a></li>
     <li><a href="theOther.html">The Other</a></li>
      </ul>
</div>
<div id="content">
      <h1>Ra ra banjo banjo</h1>
      <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
      <p>(Ra ra banjo banjo)</p>
</div>
　　上面加上CSS：
#navigation {
      position: absolute;
      top: 0;
      left: 0;
      width: 10em;
}
#content {
      margin-left: 10em;
}
　　上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。
第 1 2 页