一小時搞定DIV+CSS佈局-固定頁面開度佈局

本文講解使用DIV+CSS佈局最基本的內容，讀完本文你講會使用DIV+CSS進行簡單的頁面佈局。

DIV+CSS佈局中主要CSS屬性介紹：

Float:

       Float屬性是DIV+CSS佈局中最基本也是最經常使用的屬性，用於實現多列功能，咱們知道<div>標籤默認一行只能顯示一個，而使用Float屬性能夠實現一行顯示多個div的功能，最直接解釋方法就是能實現表格佈局的多列功能。

Margin:

       Margin屬性用於設置兩個元素之間的距離。

Padding:

       Padding屬性用於設置一個元素的邊框與其內容的距離。

Clear:

       使用Float屬性設置一行有多個DIV後（多列），最好在下一行開始以前使用Clear屬性清楚一下浮動，不然上面的佈局會影響到下面。

實例講解：下面使用實例若是作一個簡單又基本的佈局，效果以下圖：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

<! DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html  xmlns="http://www.w3.org/1999/xhtml"> < head > < meta  http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >DIV+CSS佈局教程</ title > < style  type="text/css"> #Container{      width:1000px;      margin:0 auto;/*設置整個容器在瀏覽器中水平居中*/      background:#CF3; } #Header{      height:80px;      background:#093; } #logo{      padding-left:50px;      padding-top:20px;      padding-bottom:50px; } #Content{      height:600px;      /*此處對容器設置了高度，通常不建議對容器設置高度，通常使用overflow:auto;屬性設置容器根據內容自適應高度，若是不指定高度或不設置自適應高度，容器將默認爲1個字符高度，容器下方的佈局元素（footer）設置margin-top:屬性將無效*/      margin-top:20px;/*此處講解margin的用法，設置content與上面header元素之間的距離*/      background:#0FF;        } #Content-Left{      height:400px;      width:200px;      margin:20px;/*設置元素跟其餘元素的距離爲20像素*/      float:left;/*設置浮動，實現多列效果，div+Css佈局中很重要的*/      background:#90C; } #Content-Main{      height:400px;      width:720px;      margin:20px;/*設置元素跟其餘元素的距離爲20像素*/      float:left;/*設置浮動，實現多列效果，div+Css佈局中很重要的*/      background:#90C; } /*注：Content-Left和Content-Main元素是Content元素的子元素，兩個元素使用了float:left;設置成兩列，這個兩個元素的寬度和這個兩個元素設置的padding、margin的和必定不能大於父層Content元素的寬度，不然設置列將失敗*/ #Footer{      height:40px;      background:#90C;      margin-top:20px; } .Clear{      clear:both; } </ style > </ head >    < body > < div  id="Container">      < div  id="Header">          < div  id="logo">這裏設置了padding屬性介紹一下padding的用法,padding將設置文本與邊框的距離。</ div >      </ div >      < div  id="Content">          < div  id="Content-Left">Content-Left</ div >          < div  id="Content-Main">Content-Main</ div >      </ div >      < div  class="Clear"> <!--如何你上面用到float,下面佈局開始前最好清除一下。--> </ div >      < div  id="Footer">Footer</ div > </ div > </ body > </ html >

　　

註解：Container做爲整個頁面的容器，控制着整個頁面在瀏覽器的位置，此處使用margin:0 auto;控制Container容器在瀏覽器中水平居中，通常固定寬度的佈局都會用到這就代碼。

本文只講述最基本的佈局，在具體開發實踐中可能會遇到瀏覽器兼容性等其餘問題，遇到細節問題請自行百度解決，解決的多了經驗就積累起來了。