6.11日(rì)音(yīn)訊,div+css布局之詳解與÷×探討(tǎo)。相(xiàng)信大(dà)↑π家(jiā)對(duì)布局也(yě)很(hěn)熟悉了(le)，今天我們來(Ω↓α$lái)說(shuō)一(yī)下(xià)布局的(d¥™₹≥e)幾個(gè)要(yào)點和(hé)詳細分(fδΩ∞ēn)析，重點是(shì)把布局吃(chī)透，理(lǐ)解清楚，≈Ω•這(zhè)樣才能(néng)在網頁制(zhì)作(zuò)中把÷>結構架好(hǎo)，把順序理(lǐ)清。大(dà)家(jiā)≈₩∑對(duì)dw軟件(jiàn)已經是(shì)很(hěn™≈♠>)熟悉了(le)，具體(tǐ)怎麽使用(yònσ♦♦>g)我就(jiù)不(bù)講了(le)。不(bù)過建議(y±ì)大(dà)家(jiā)能(néng)手寫的(de)盡量還(h×γ§♠ái)是(shì)手寫，這(zhè)樣有(yǒu)助于提高(gāo)效≈£率。
一(yī)、一(yī)列固定寬度
我們先看(kàn)一(yī)下(xià)一(yī)列固定寬度，首先要(φ♦♣πyào)新建一(yī)個(gè)頁面：
注意：這(zhè)裡(lǐ)的(de)文(wén)檔類型是←↑$(shì)過渡型，目前我們采用(yòng)這(zhè)種寬松驗證方 ↑式。
接下(xià)來(lái)在頁面中插入一(yī)個(gè)di←£v标簽，我們可(kě)以點擊工(gōng)具欄的(de)&ldq↓₽≤™uo;插入DIV标簽”按鈕，∏σ在打開(kāi)的(de)對(duì)話(huà)框中ID項給這(zhè)✘§個(gè)div命一(yī)下(xià)名，我→們給它起個(gè)名叫layout（名稱根據自(zì)己需要(yào)命 π名）。
插入div後，在右側的(de)css樣式面闆中，定義∏ו↓id為(wèi)layout的(de)樣式，确定後在打開(kāi)的(de≈∞ ♦)css編輯對(duì)話(huà)框的(de)方框≈∑選項中設計(jì)寬度500，高(gāo)度300。為σ±(wèi)了(le)看(kàn)清楚起見(jiàn)，我們把這(>÷zhè)個(gè)div設置個(gè)背景色，這('πzhè)樣就(jiù)能(néng)預覽出大(dà)小(xiǎo$>)和(hé)位置了(le)。
這(zhè)裡(lǐ)選擇高(gāo)級，然後在選擇器(qì)中填寫：≥←σ#layout，如(rú)果是(shì)選中div後，再點擊添加，它會(hu ≤¥★ì)自(zì)動添加上(shàng)。因為(w©♦$'èi)是(shì)定義ID，所以前面需要(yào)加#，後面會(huì)有♦&(yǒu)id和(hé)class的(de)詳細講解
我們預覽一(yī)下(xià)，看(kàn)看(kàn)在IE中♥☆∏的(de)顯示效果，一(yī)列固定寬度就(jiù)這(zhè)樣做(✔±☆♠zuò)成了(le)，簡單吧(ba)！CSS↕♣♥代碼及在IE中顯示如(rú)下(xià)：
<styletype=" ®π™;text/css">
#layout{height:300px;width:'≈∞400px;background:#99F ©Fcc;}
</style>
提示：可(kě)以先修改部分(fēn)代碼後再運行(xín¥¶¥↓g)
二、一(yī)列固定寬度居中
一(yī)列固定寬度居中和(hé)一(yī≠¥)列固定寬度相(xiàng)比，我們要(y৙o)解決的(de)問(wèn)題就(jiù)是(shì)居中。這(zh♣±↕₩è)裡(lǐ)我們用(yòng)到(dào)css的(de)外£€•Ω(wài)邊距屬性：margin。在IE6及以上(shàng)版本和(hé≤φ♥£)标準的(de)浏覽器(qì)當中，當設置一(yī)個(gè)盒αΩ÷✘模型的(de)的(de)margin:aut☆≤o;時(shí)，可(kě)以讓這(zhè)個(gè)盒模型居中。我們×☆下(xià)邊在css樣式表中加上(shàng)這(zhè)個(gè)屬性看₽£★∞(kàn)看(kàn)效果：
#layout{height:300px;width:×♥$γ400px;background:#99FFβ♥÷cc;margin:auto;}
在dreamweaver的(de)設計(jì)視(shì)圖中₹₽☆我們選中看(kàn)看(kàn)，是(sh←÷ì)不(bù)是(shì)已經居中了(le ✘ ♠)，我們再在IE下(xià)預覽一(yī)下(xià)，同樣居中。
提示：可(kě)以先修改部分(fēn)代碼後再運行(♠₽xíng)
三、一(yī)列自(zì)适應寬度
自(zì)适應寬度是(shì)相(xiàng)對(duì)于浏覽器(qì✘¶)而言，盒模型的(de)寬度随著(zhe)浏覽γ 器(qì)寬度的(de)改變而改變。這(zhè)時(shí)εα要(yào)用(yòng)到(dào)寬度的(de≤≠©)百分(fēn)比。當一(yī)個(gè)盒模型不(bù)設置寬度時(s€>hí)，它默認是(shì)相(xiàng)對(duì)于浏覽器(qδ±≈ì)顯示的(de)。我們把剛才的(de)固定寬 σ≥度例子(zǐ)中的(de)寬度去(qù)掉看(kàn)看(kàn)：
#layout{height:300px;ba₹•>ckground:#99FFcc;}
有(yǒu)些(xiē)朋(péng)友(yǒu)可(kě)能(nénΩg)要(yào)問(wèn)了(le)，那(nà)為(wèi÷•♦)什(shén)麽還(hái)有(yǒu)那(nà)麽寬♦"©的(de)白(bái)邊呢(ne)？這(zh®$è)個(gè)是(shì)由body默認的(de)外(wài)邊距造β↔成的(de)。當我們不(bù)用(yòng)任何樣式表進行(xíng)定♣βε義時(shí)，body，h1－h6，ul等元素默認有(yǒu)外(wà⧥i)邊距或其它樣式的(de)。這(zhè)裡(lǐ)我們♠&÷δ在css樣式中增加一(yī)項：body{ma≈δrgin:0;}，就(jiù)可(kě)以把body默認的(de)外(wàiε±)邊距去(qù)掉，這(zhè)時(shí)再預覽一(yī)下(xià)±'，白(bái)邊就(jiù)沒了(le)。
body{margin:0px;}
#layout{height:300px;bac₽≈kground:#99FFcc;}
這(zhè)裡(lǐ)的(de)選擇器(qì)類型是(shì)新手↓δ朋(péng)友(yǒu)最容易迷糊的(d"¶§e)地(dì)方，類：是(shì)指定義一(yī)個(gè)cl§✔φass，可(kě)以多(duō)個(gè)對(duì)象引©₽用(yòng)；标簽：指對(duì)默認的(de)html标簽進行(¥& xíng)重新定義，如(rú)可(kě)以≤←α←定義body{margin:0}，意思是(shì)将body的(de)外(wà¥&↑i)邊距設置為(wèi)0，h2{color:#f00}是≠φ(shì)将所有(yǒu)h2标簽的(de)文(wén)字顔色設置為↔∑'(wèi)紅(hóng)色；高(gāo)級它把ID和(hé)僞類放(fàng'☆')到(dào)一(yī)塊了(le)，是(shì)一←✔(yī)個(gè)設置不(bù)合理(lǐ)的(de)地(d∞♥ ì)方，在cs4版本中已經分(fēn)開(kā×÷i)了(le)。ID是(shì)以#開(kāi)始，id隻能✘π✔ (néng)作(zuò)用(yòng)于一(yī)個(gè)對(duì)象，不→∑& (bù)能(néng)作(zuò)用(yò↓ ™ng)于多(duō)個(gè)對(duì)象，優先級高↔→(gāo)于class，這(zhè)是(shì)id和(hé)class的÷≈♦♣(de)區(qū)别。僞類會(huì)在第九節時↔↕(shí)詳細講解
如(rú)果我們需要(yào)按浏覽器(qì)的(de)80%顯示✘•，那(nà)麽設置寬度為(wèi)80%，當✔♥§α改變浏覽器(qì)窗(chuāng)口大(dà)小(xiǎo↑×$)時(shí)，盒模型的(de)寬度也(yě)會(huì)跟著(zhe)改©π∑λ變。
提示：可(kě)以先修改部分(fēn)代碼後>€₹ 再運行(xíng)
四、一(yī)列自(zì)适應寬度居中
同樣和(hé)固定寬度居中一(yī)樣，我們隻€♥ 需要(yào)設置div的(de)外(wài)邊距為(wèi)auto♦β即可(kě)實現(xiàn)居中了(le)。
body{margin:0px;}
#layout{margin:auto;height£σ:300px;background:#9"≠•✔9FFcc;width:80%;}
提示：可(kě)以先修改部分(fēn)代碼後再運行(Ω®§λxíng)
五、一(yī)列二至多(duō)塊布局
一(yī)般的(de)網站(zhàn)整體(tǐ)可(kě)以分(fēn£←)為(wèi)上(shàng)中下(xià)結構，即：頭部、中間(®§jiān)主體(tǐ)、底部。那(nà)麽我們可(kě)以用(yòn©♦g)三個(gè)div塊來(lái)劃分(α±εfēn)，分(fēn)别給它們起名為(wèi)：頭部（hea∞♠ der）、主體(tǐ)（maincontent ≈）、底部（footer）。
采用(yòng)固定寬度居中的(de)方式，代碼✘ ±如(rú)下(xià)：
body{margin:0;padding:0;}
#header{margin:5pδ&xauto;width:500px;heigh∑☆δ©t:80px;background:#9F9;}
#main{margin:5pxaut→§↕o;width:500px;height:400px;♣®background:#9FF;}
#footer{margin:5pxauto∑<;width:500px;height:80pδ≠φ✔x;background:#9f9;}
為(wèi)了(le)便于區(qū)€≈↔分(fēn)，在背景項裡(lǐ)設置了(le)背景色，這(zhè)裡(÷♥<lǐ)不(bù)在貼圖。依此類推，把另外(wài)兩個(™gè)div塊給置好(hǎo)，整個(gè) ♥≥☆效果就(jiù)出來(lái)了(le)。這(zhè)是(αε& shì)一(yī)個(gè)大(dà)多(duō)數(shù)網站(zhàn)♥σ±☆采用(yòng)的(de)上(shàng)中下(<>xià)布局結構。
提示：可(kě)以先修改部分(fēn)代碼後再運行(xín←☆g)
許多(duō)朋(péng)友(yǒuπ®★)在問(wèn)：為(wèi)什(shé≥≈n)麽兩個(gè)相(xiàng)鄰的(de)容器(•↑∑qì)中間(jiān)的(de)間(jiān)距不(bù)π£≈是(shì)10px，而是(shì)5px呢(≥✔§ne)？按照(zhào)我們正常的(de)₽∏理(lǐ)解，認為(wèi)應該是(shì)兩個(gè)值相(xiàng)加，&♦↔β其實這(zhè)裡(lǐ)是(shì)兩個(gè)合并後取最大(dà)值。用(★"♣εyòng)css手冊中的(de)話(huà)說(s←♠δhuō)：塊級元素的(de)垂直相(xiàng)鄰外(§∞π∑wài)邊距會(huì)合并，而行(xíng)內(nèi)元素實際上(shàn₽ ¶g)不(bù)占上(shàng)下(xià)外(wài)邊距。行(xínπ♣∞₹g)內(nèi)元素的(de)的(de)左右外(wài)邊距不(bù)會(h←☆uì)合并。同樣地(dì)，浮動元素的(de)外(wài)邊距也∑γ₩(yě)不(bù)會(huì)合并。允許指定負的(de)外(wài)↓☆← 邊距值，不(bù)過使用(yòng)時(shí)要(α±₽™yào)小(xiǎo)心（有(yǒu)關塊級元素和(hé↕$)行(xíng)內(nèi)元素的(de)概念在下(xià)一(yγ ♦ī)節講到(dào)）。
六、小(xiǎo)結
本節課涉及到(dào)以下(xià)知(zhī)$δ識點：
1、CSS可(kě)視(shì)化(huà)生(sh∞♥ēng)成、格式化(huà)
本教程便于新手學習(xí)，采用(yòn®δg)dw的(de)css可(kě)視(shì)化(hu♣≠à)生(shēng)成方式，熟練後的(de)™ ≈朋(péng)友(yǒu)盡量手寫，這(zhè→☆♠σ)樣可(kě)以提高(gāo)工(gōng)作(zuò)效δ∞率。目前來(lái)說(shuō)，希望常用(yòng)的(de)ו大(dà)家(jiā)都(dōu)能(néng)✘±'記住。關于css的(de)格式化(huà)，指cs∏∞$&s的(de)排版方式，細心的(de)朋(péng)友(yǒu)已發現(β✔πxiàn)，我在這(zhè)裡(lǐ)貼出的(de)css代碼，每個(gè)類∏Ω•或ID都(dōu)是(shì)寫在一(yī)行(xíng)的(d∏δe)。可(kě)能(néng)你(nǐ)的(de)還(hái≈↔¥)是(shì)分(fēn)成多(duō)行(xíng)，怎麽"≈把它們弄到(dào)一(yī)行(xíng)上(shàng)呢(• ±€ne)？請(qǐng)看(kàn)下(xi☆>αà)面的(de)代碼和(hé)圖示：
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;
}
經過以上(shàng)三步之後，看(kàπ←§n)看(kàn)，你(nǐ)的(de)代碼是(shì)不(bù)是(shì)∑↔™✘和(hé)我的(de)一(yī)樣了(leπ≠♣)。
2、CSS縮寫
css的(de)許多(duō)屬性是(shì)可"€₽↕(kě)以簡寫的(de)，這(zhè)樣便于閱讀(dú)和(hé)$♦修改，減少(shǎo)代碼量，設置方法如(rú)下(xià)：
把需要(yào)縮寫的(de)項目選中，再生 <≥∑(shēng)成的(de)css代碼即為(wèi)簡寫形✔β♦∞式了(le)。這(zhè)裡(lǐ)所說(shuō)的(de)是(shì)¶←÷多(duō)個(gè)屬性合并到(dào)一(yī)塊的(de)∑↕簡寫方式，另外(wài)像顔色值了(le)也(yě)可(kě)以簡寫的©♥(de)。比如(rú)顔色值為(wèi)#ff6600;可(kě)以簡寫™★為(wèi)#f60;兩位兩位一(yī)樣的(de)才可(kě)以簡寫，像#π←₽c2c2c2是(shì)不(bù)可(kě)以簡寫的(>© de)。
3、CSS語法
如(rú)圖所示，CSS語法由如(₩§ βrú)下(xià)三部分(fēn)構成，選擇器(q ∏ì)：可(kě)以是(shì)ID、CLA≠§SS或标簽；屬性和(hé)值是(shì)用( βyòng)來(lái)定義這(zhè)個(gè)物(♣ε£δwù)件(jiàn)的(de)某一(yī)個(gèλ♠)特性。如(rú)一(yī)張桌子(zǐ)的(de)長(♦≥→cháng)120cm，寬60cm，套用(yòng)css的(de)格αφ®™式為(wèi)，桌子(zǐ){長(cháng):120cm;寬:60cm;↕¥}，這(zhè)樣是(shì)不(bù)是(shì)容易理(€☆ lǐ)解。
4、ID和(hé)CLASS選擇器≈γ"(qì)
id隻能(néng)在頁面中對(d☆≤÷uì)應一(yī)個(gè)元素，就(jiù"©✘↓)像我們的(de)身(shēn)份證号一(yī)樣，每個(gè)人(± ®rén)的(de)都(dōu)不(bù)一(yī)樣；clasγ±s為(wèi)類，可(kě)以對(duì)應多(duō)個(gè)元素，☆∑比如(rú)說(shuō)一(yī)年(nián)級三班↔≠π的(de)學生(shēng)，它所對(duì)應的(≤↕±•de)可(kě)能(néng)是(shì)10個(gè)20個(✘✔gè)學生(shēng)。
在css中id的(de)級别要(yào)高(gāo)于 ε©λclass，也(yě)就(jiù)是(shì)說(shuō)一(yī∑λγ)個(gè)标簽如(rú)果有(yǒu)兩個(♦ gè)屬性，浏覽器(qì)它會(huì)摒棄class去(qù)執行(xí₩₩←'ng)id的(de)屬性。當然了(le)，這(zhè♠γ)樣的(de)語法大(dà)家(jiā)也(yě)都(dōu)能(né♥<φ₩ng)理(lǐ)解，但(dàn)現(xiànΩ ©)實運用(yòng)中，具體(tǐ)要(yào)用(yòng)id和(h→☆é)class是(shì)根據現(xiàn)實情況而定的(deδ★λ)，
邯鄲網站(zhàn)建設首創網絡小(xiǎo)編建議(yì)大(dà)≤¶÷家(jiā)盡量少(shǎo)用(yòng)id，能(néng)用(yòn±£¶σg)class就(jiù)盡量用(yòng)classπ☆，因為(wèi)id是(shì)不(bù)能(né₹←ε ng)重複名的(de)，我們的(de)網頁是(shì)難免要(yào)©₩加一(yī)些(xiē)效果，這(zhè)就(jiù)需要(yào)j<∑∑s或jq了(le)，它們是(shì)對(du £ì)于同id時(shí)會(huì)發生(shēng)一(yī)些(x≈↕♠iē)錯(cuò)誤的(de)，用(yòng)好₽✘♠(hǎo)、用(yòng)準、恰當好(hǎo)處或許是(shì)對(duì)它←®↔ 的(de)最好(hǎo)的(de)要(y γ ào)求和(hé)标準了(le)。
