簡單學習CSS實現網頁布局的基礎知識

來源:互聯網
上載者:User
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等於導航條的寬度。

  真是簡單。你沒有限制這兩列的距離,使用聰明的布局,你可以隨心所欲安排許多塊。如果你想添加第三列,比如:

#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 */
}

  最後階段去絕對位置元素,因為它們獨立存在,無法正確瞭解它們哪裡結束。如果你使用上面的例子,所有的頁面有小的導航條和大的內容地區到可以,但是,特別是寬度和大小使用相對值,你必須經常放棄定位的希望,比如位於元素最下面的底部布局。如果你想定位底部,採用浮動模式比絕對位置好。

  Floating 浮動

  浮動元素可以在一條線上移動。

  浮動一般使用在定位頁面裡的小型元素,但也可使用在大塊裡,比如導航。

  上面的HTML例子使用下面CSS:

#navigation {
    float: left;
    width: 10em;
}
#navigation2 {
    float: right;
    width: 10em;
}
#content {
    margin: 0 10em;
}

  如果你不希望接下來的元素包圍浮動物件,可以使用clear屬性。clear:left清除浮動在左邊的元素,clear:right清除浮動在右邊的元素,clear:both清除所有。如果你想添加底部footer,可以像下面:

#footer {
    clear: both;
}

  footer將在所有列下面,不管它們的長度如何。

  這篇介紹了定位和浮動的基本情況,強調頁面的大塊,但記住,上面方法可以運用到塊裡面的任何元素。通過組合使用position,floating,margins,padding和border,你可以表現出任何網頁設計,table布局能做的CSS沒有什麼不能做。

  使用表格版面配置的理由就是考慮古老的瀏覽器。CSS的優勢在於擁有很高的可用性,而且體積上只有使用table布局的部分大小。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.