次日 一列布局

http://www.aa25.cn/special/10day/

今天咱們開始學習《十天學會web標準(div+css)》的一列布局，包含如下幾種形式：

• 一列固定寬度
• 一列固定寬度居中
• 一列自適應寬度
• 一列自適應寬度居中
• 一列二至多塊佈局

前一節咱們回顧了xhtml基礎和css基礎部分，今天咱們正式開始使用網頁製做軟件——adobe公司出品的dreamweaver來開始網頁設計之旅。相信以前您已經用過這個軟件了，具體怎麼使用我就不講了。爲了照顧部分朋友，今天課程的css部分咱們是以可視化生成方式，不過建議你們能手寫的儘可能仍是手寫，這樣有助於提升效率。

1、一列固定寬度

咱們先看一下一列固定寬度，首先要新建一個頁面：

注意：這裏的文檔類型是過渡型，目前咱們採用這種寬鬆驗證方式。

接下來在頁面中插入一個div標籤，咱們能夠點擊工具欄的「插入DIV標籤」按鈕，在打開的對話框中ID項給這個div命一下名，咱們給它起個名叫layout（名稱根據本身須要命名）。

插入div後，在右側的css樣式面板中，定義id爲layout的樣式，肯定後在打開的css編輯對話框的方框選項中設計寬度500，高度300。爲了看清楚起見，咱們把這個div設置個背景色，這樣就能預覽出大小和位置了。

這裏選擇高級，而後在選擇器中填寫：#layout，若是是選中div後，再點擊添加，它會自動添加上。由於是定義ID，因此前面須要加#，後面會有id和class的詳細講解

咱們預覽一下，看看在IE中的顯示效果，一列固定寬度就這樣作成了，簡單吧！CSS代碼及在IE中顯示以下：

<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>

 

   提示：能夠先修改部分代碼後再運行

 

2、一列固定寬度居中

一列固定寬度居中和一列固定寬度相比，咱們要解決的問題就是居中。這裏咱們用到css的外邊距屬性：margin。在IE6及以上版本和標準的瀏覽器當中，當設置一個盒模型的的margin:auto;時，可讓這個盒模型居中。咱們下邊在css樣式表中加上這個屬性看看效果：

#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }

在dreamweaver的設計視圖中咱們選中看看，是否是已經居中了，咱們再在IE下預覽一下，一樣居中。

 

 

   提示：能夠先修改部分代碼後再運行

 

3、一列自適應寬度

自適應寬度是相對於瀏覽器而言，盒模型的寬度隨着瀏覽器寬度的改變而改變。這時要用到寬度的百分比。當一個盒模型不設置寬度時，它默認是相對於瀏覽器顯示的。咱們把剛纔的固定寬度例子中的寬度去掉看看：

#layout { height: 300px; background: #99FFcc;}

有些朋友可能要問了，那爲何還有那麼寬的白邊呢？這個是由body默認的外邊距形成的。當咱們不用任何樣式表進行定義時，body，h1－h6，ul等元素默認有外邊距或其它樣式的。這裏咱們在css樣式中增長一項：body {margin:0;}，就能夠把body默認的外邊距去掉，這時再預覽一下，白邊就沒了。

body { margin: 0px; }
#layout { height: 300px; background: #99FFcc;}

這裏的選擇器類型是新手朋友最容易迷糊的地方，類：是指定義一個class，能夠多個對象引用；標籤：指對默認的html標籤進行從新定義，如能夠定義body{margin:0}，意思是 將body的外邊距設置爲0，h2{color:#f00}是將全部h2標籤的文字顏色設置爲紅色；高級它把ID和僞類放到一塊了，是一個設置不合理的地方，在cs4版本中已經分開了。ID是以#開始，id只能做用於一個對象，不能做用於多個對象，優先級高於class，這是id和class的區別。僞類會在第九節時詳細講解

若是咱們須要按瀏覽器的80%顯示，那麼設置寬度爲80%，當改變瀏覽器窗口大小時，盒模型的寬度也會跟着改變。

 

   提示：能夠先修改部分代碼後再運行

 

4、一列自適應寬度居中

一樣和固定寬度居中同樣，咱們只須要設置div的外邊距爲auto便可實現居中了。

body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }

 

   提示：能夠先修改部分代碼後再運行

 

5、一列二至多塊佈局

通常的網站總體能夠分爲上中下結構，即：頭部、中間主體、底部。那麼咱們能夠用三個div塊來劃分，分別給它們起名爲：頭部（header）、主體（maincontent）、底部（footer）。

採用固定寬度居中的方式，代碼以下：

body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

爲了便於區分，在背景項裏設置了背景色，這裏不在貼圖。依此類推，把另外兩個div塊給置好，整個效果就出來了。這是一個大多數網站採用的上中下佈局結構。

 

   提示：能夠先修改部分代碼後再運行

 

 

許多朋友在問：爲何兩個相鄰的容器中間的間距不是10px，而是5px呢？按照咱們正常的理解，認爲應該是兩個值相加，其實這裏是兩個合併後取最大值。用css手冊中的話說：塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。一樣地，浮動元素的外邊距也不會合並。容許指定負的外邊距值，不過使用時要當心（有關塊級元素和行內元素的概念在下一節講到）。

6、小結

本節課涉及到如下知識點：

一、CSS可視化生成、格式化

本教程便於新手學習，採用dw的css可視化生成方式，熟練後的朋友儘可能手寫，這樣能夠提升工做效率。目前來講，但願經常使用的你們都能記住。關於css的格式化，指css的排版方式，細心的朋友已發現，我在這裏貼出的css代碼，每一個類或ID都是寫在一行的。可能你的仍是分紅多行，怎麼把它們弄到一行上呢？請看下面的代碼和圖示：

body {
margin:0;
padding:0;
}
#header {
margin:5px auto;
width:500px;
height:80px;
background:#9F9;
}
#main {
margin:5px auto;
width:500px;
height:400px;
background:#9FF;
}
#footer {
margin:5px auto;
width:500px;
height:80px;
background:#9f9;
}

通過以上三步以後，看看，你的代碼是否是和個人同樣了。還

二、CSS縮寫

css的許多屬性是能夠簡寫的，這樣便於閱讀和修改，減小代碼量，設置方法以下：

把須要縮寫的項目選中，再生成的css代碼即爲簡寫形式了。這裏所說的是多個屬性合併到一塊的簡寫方式，另外像顏色值了也能夠簡寫的。好比顏色值爲#ff6600;能夠簡寫爲#f60;兩位兩位同樣的才能夠簡寫，像#c2c2c2是不能夠簡寫的。

三、CSS語法

如圖所示，CSS語法由以下三部分構成，選擇器：能夠是ID、CLASS或標籤；屬性和值是用來定義這個物件的某一個特性。如一張桌子的長120cm，寬60cm，套用css的格式爲，桌子{長:120cm;寬:60cm;}，這樣是否是容易理解。

四、ID和CLASS選擇器

id只能在頁面中對應一個元素，就像咱們的身份證號同樣，每一個人的都不同；class爲類，能夠對應多個元素，好比說一年級三班的學生，它所對應的多是10個20個學生。

id的優先級高於class，好比說今天三班的學生上體育課，小明留下來打掃衛生。那麼三班的學生上體育課這是一個類，而小明打掃衛生這是個id，雖然小明也是三班的學生，但id高於class，因此小明執行打掃衛生的任務。