6.11日音訊,div+css布局之詳解與探討。相信大家對布局也很熟悉了，今天我們來說一下布局的幾個要點和詳細分析，重點是把布局吃透，理解清楚，這樣才能在網(wǎng)頁制作中把結構架好，把順序理清。大家對dw軟件已經(jīng)是很熟悉了，具體怎么使用我就不講了。不過建議大家能手寫的盡量還是手寫，這樣有助于提高效率。

 

　　一、一列固定寬度

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

　　注意：這里的文檔類型是過渡型，目前我們采用這種寬松驗證方式。

　　接下來在頁面中插入一個div標簽，我們可以點擊工具欄的“插入DIV標簽”按鈕，在打開的對話框中ID項給這個div命一下名，我們給它起個名叫l(wèi)ayout（名稱根據(jù)自己需要命名）。

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

　　這里選擇高級，然后在選擇器中填寫：#layout，如果是選中div后，再點擊添加，它會自動添加上。因為是定義ID，所以前面需要加#，后面會有id和class的詳細講解

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

　　<styletype="text/css">

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

　　</style>

　　提示：可以先修改部分代碼后再運行

　　二、一列固定寬度居中

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

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

　　在dreamweaver的設計視圖中我們選中看看，是不是已經(jīng)居中了，我們再在IE下預覽一下，同樣居中。

　　提示：可以先修改部分代碼后再運行

　　三、一列自適應寬度

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

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

　　有些朋友可能要問了，那為什么還有那么寬的白邊呢？這個是由body默認的外邊距造成的。當我們不用任何樣式表進行定義時，body，h1－h(huán)6，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版本中已經(jīng)分開了。ID是以#開始，id只能作用于一個對象，不能作用于多個對象，優(yōu)先級高于class，這是id和class的區(qū)別。偽類會在第九節(jié)時詳細講解

　　如果我們需要按瀏覽器的80%顯示，那么設置寬度為80%，當改變?yōu)g覽器窗口大小時，盒模型的寬度也會跟著改變。

　　提示：可以先修改部分代碼后再運行

　　四、一列自適應寬度居中

　　同樣和固定寬度居中一樣，我們只需要設置div的外邊距為auto即可實現(xiàn)居中了。

　　body{margin:0px;}

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

　　提示：可以先修改部分代碼后再運行

　　五、一列二至多塊布局

　　一般的網(wǎng)站整體可以分為上中下結構，即：頭部、中間主體、底部。那么我們可以用三個div塊來劃分，分別給它們起名為：頭部（header）、主體（maincontent）、底部（footer）。

　　采用固定寬度居中的方式，代碼如下：

　　body{margin:0;padding:0;}

　　#header{margin:5pxauto;width:500px;height:80px;background:#9F9;}

　　#main{margin:5pxauto;width:500px;height:400px;background:#9FF;}

　　#footer{margin:5pxauto;width:500px;height:80px;background:#9f9;}

　　為了便于區(qū)分，在背景項里設置了背景色，這里不在貼圖。依此類推，把另外兩個div塊給置好，整個效果就出來了。這是一個大多數(shù)網(wǎng)站采用的上中下布局結構。

　　提示：可以先修改部分代碼后再運行

　　許多朋友在問：為什么兩個相鄰的容器中間的間距不是10px，而是5px呢？按照我們正常的理解，認為應該是兩個值相加，其實這里是兩個合并后取最大值。用css手冊中的話說：塊級元素的垂直相鄰外邊距會合并，而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心（有關塊級元素和行內元素的概念在下一節(jié)講到）。

　　六、小結

　　本節(jié)課涉及到以下知識點：

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

　　本教程便于新手學習，采用dw的css可視化生成方式，熟練后的朋友盡量手寫，這樣可以提高工作效率。目前來說，希望常用的大家都能記住。關于css的格式化，指css的排版方式，細心的朋友已發(fā)現(xiàn)，我在這里貼出的css代碼，每個類或ID都是寫在一行的。可能你的還是分成多行，怎么把它們弄到一行上呢？請看下面的代碼和圖示：

　　body{

　　margin:0;

　　padding:0;

　　}

　　#header{

　　margin:5pxauto;

　　width:500px;

　　height:80px;

　　background:#9F9;

　　}

　　#main{

　　margin:5pxauto;

　　width:500px;

　　height:400px;

　　background:#9FF;

　　}

　　#footer{

　　margin:5pxauto;

　　width:500px;

　　height:80px;

　　background:#9f9;

　　}

　　經(jīng)過以上三步之后，看看，你的代碼是不是和我的一樣了。

　　2、CSS縮寫

　　css的許多屬性是可以簡寫的，這樣便于閱讀和修改，減少代碼量，設置方法如下：

　　把需要縮寫的項目選中，再生成的css代碼即為簡寫形式了。這里所說的是多個屬性合并到一塊的簡寫方式，另外像顏色值了也可以簡寫的。比如顏色值為#ff6600;可以簡寫為#f60;兩位兩位一樣的才可以簡寫，像#c2c2c2是不可以簡寫的。

　　3、CSS語法

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

　　4、ID和CLASS選擇器

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

　　在css中id的級別要高于class，也就是說一個標簽如果有兩個屬性，瀏覽器它會摒棄class去執(zhí)行id的屬性。當然了，這樣的語法大家也都能理解，但現(xiàn)實運用中，具體要用id和class是根據(jù)現(xiàn)實情況而定的，邯鄲網(wǎng)站建設首創(chuàng)網(wǎng)絡小編建議大家盡量少用id，能用class就盡量用class，因為id是不能重復名的，我們的網(wǎng)頁是難免要加一些效果，這就需要js或jq了，它們是對于同id時會發(fā)生一些錯誤的，用好、用準、恰當好處或許是對它的最好的要求和標準了。