龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

CSS教程 14、CSS网页布局Page Layout [翻译Html

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
使用CSS布局非常简单,如果你习惯使用tables布局,可能开始时有点困难,但其实很容易,事实上只是观念的不同。 你需要把网页的每个部分看成独立的块,你可以绝对或相对定位块。
  
  使用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;
第 1 2 3 页
精彩图集

赞助商链接