DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 用CSS的float和clear屬性進行三欄網頁布局
用CSS的float和clear屬性進行三欄網頁布局
編輯:CSS進階教程     

網頁制作Poluoluo文章簡介:用CSS的float和clear屬性進行三欄網頁布局.

三欄布局是最常見的網頁布局,主要頁內容放在中間一欄,邊上的兩欄放置導航鏈接之類的內容。基本布局一般是標題之下放置三欄,三欄占據整個頁面的寬度,最後在頁的底端放置頁腳,頁腳也占據整個頁面寬度。本文介紹一種用CSS的float和clear屬性來獲得三欄布局的方法。

絕大多數網頁設計者都熟悉傳統的網頁設計技術,用這些技術可以生成帶有表格、創建固定寬度布局或者“液態”(它可以根據用戶浏覽器窗口寬度自動伸縮)布局的網頁。

基本方法

基本的布局包含五個div,即標題、頁腳和三欄。標題和頁腳占據整個頁寬。左欄div和右欄div都是固定寬度的,並且用float屬性來把它們擠壓到浏覽器窗口的左側和右側。中欄實際上占據了整個頁寬,中欄的內容在左、右兩欄之間“流淌”。由於中欄div的寬度並不固定,因此它可以根據浏覽器窗口的改變進行必要的伸縮。中欄div的左側和右側的填充(padding)屬性保證內容安排在一個整齊的欄中,甚至當它伸展到邊欄(左欄或者右欄)的底端也是這樣。

三欄布局的一個例子

XHTML代碼:

以下是引用片段:

  
<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>
</body>

 

下面是CSS代碼:

以下是引用片段:

  
body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved