十(shí)天(tiān)學會(huì)web標(biāo)準(zhǔn)DIV+CSS 一(yī)列(liè)布(bù)局，包(bāo)含以(yǐ)下幾(jī)種(zhǒng)形(xíng)式：
一， 一列固定寬度 二，一列固定寬度居中 三，一列自適應寬度 四，一列自適應寬度居中 五，一列二至多塊布局
前(qián)一節我(wǒ)們回(huí)顧了xHTML基礎和(hé)css基(jī)礎部分，今天(tiān)我(wǒ)們正式(shì)開(kāi)始(shǐ)使用(yòng)網頁製(zhì)作軟件——adobe公(gōng)司出品(pǐn)的(dí)dreamweaver來(lái)開始網頁(yè)設計之(zhī)旅(lǚ)。相信(xìn)之前您已經用過這個軟件(jiàn)了(liǎo)，具體怎(zěn)麼(mó)使用我就不講了。為了照(zhào)顧部分朋友，今天課(kè)程的css部分我們(mén)是(shì)以可視(shì)化生(shēng)成方式，不過建議大(dà)家(jiā)能手寫的盡(jìn)量還(huán)是手寫，這(zhè)樣(yàng)有(yǒu)助於(yú)提(tí)高(gāo)效率。
一，一(yī)列固定寬度
我們(mén)先(xiān)看(kàn)一(yī)下一(yī)列固定(dìng)寬(kuān)度，首(shǒu)先(xiān)要新建(jiàn)一個頁麵：
注(zhù)意：這(zhè)裏(lǐ)的(dí)文檔類型(xíng)是(shì)過(guò)渡型(xíng)，目前(qián)我(wǒ)們(mén)采用這種寬(kuān)鬆驗證(zhèng)方式(shì)。
接下來(lái)在頁麵(miàn)中插(chā)入一個(gè)div標簽，我們可(kě)以點擊工具(jù)欄的“插(chā)入DIV標簽(qiān)”按鈕(niǔ)，在打開的對(duì)話框中ID項(xiàng)給這(zhè)個div命(mìng)一(yī)下名，我(wǒ)們給它起(qǐ)個名叫(jiào)layout（名稱根據自己需要(yào)命(mìng)名）。
插入(rù)div後(hòu)，在(zài)右(yòu)側的css樣(yàng)式(shì)麵板(bǎn)中，定義id為layout的(dí)樣式(shì)，確定(dìng)後在打開的css編輯對(duì)話(huà)框的方(fāng)框選項中設(shè)計(jì)寬(kuān)度(dù)500，高度300。為了看(kàn)清楚(chǔ)起(qǐ)見(jiàn)，我們把(bǎ)這個div設置個背景(jǐng)色，這樣就(jiù)能預(yù)覽出大(dà)小和位置(zhì)了。
這裏(lǐ)選擇高級(jí)，然後在(zài)選擇器中(zhōng)填寫：#layout，如果(guǒ)是(shì)選(xuǎn)中div後，再(zài)點(diǎn)擊(jī)添(tiān)加，它(tā)會自動添(tiān)加上。因(yīn)為是定義(yì)ID，所以(yǐ)前麵(miàn)需要加(jiā)#，後麵會(huì)有id和(hé)class的詳細(xì)講(jiǎng)解
我(wǒ)們(mén)預覽(lǎn)一下(xià)，看看(kàn)在IE中的(dí)顯示(shì)效果，一列(liè)固定(dìng)寬(kuān)度就這樣做(zuò)成了，簡單(dān)吧！CSS代碼及在(zài)IE中(zhōng)顯示(shì)如下：
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>
代碼(mǎ)原(yuán)文：
<!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" />
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>
</head>
<body>
<div id="layout">此處顯示(shì) id "layout" 的(dí)內(nèi)容(róng)</div>
</body>
</html>
提示：可以先修改(gǎi)部分代(dài)碼後(hòu)再(zài)運(yùn)行
二(èr)，一(yī)列固定寬度居(jū)中(zhōng)
一列固(gù)定(dìng)寬度居(jū)中和(hé)一(yī)列固(gù)定寬度(dù)相比，我們(mén)要解決的問題就(jiù)是(shì)居中。這(zhè)裏我們(mén)用(yòng)到(dào)css的(dí)外(wài)邊距(jù)屬性(xìng)：margin。在IE6及以上版本和(hé)標準的(dí)瀏覽器當中(zhōng)，當設(shè)置一個盒模型(xíng)的(dí)的(dí)margin:auto;時(shí)，可以讓(ràng)這(zhè)個(gè)盒模(mó)型(xíng)居中(zhōng)。我們(mén)下邊在(zài)css樣式(shì)表中(zhōng)加(jiā)上這(zhè)個(gè)屬(shǔ)性看看效果：
#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }
在(zài)dreamweaver的(dí)設計視(shì)圖(tú)中(zhōng)我們選中看(kàn)看(kàn)，是不(bù)是已經(jīng)居(jū)中了(liǎo)，我們再在IE下預(yù)覽(lǎn)一(yī)下(xià)，同樣居中。
代碼原文(wén)：
<!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" />
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }
</style>
</head>
<body>
<div id="layout">此處顯示 id "layout" 的內容</div>
</body>
</html>
三(sān)，一列自(zì)適(shì)應(yīng)寬(kuān)度(dù)
自(zì)適應(yīng)寬度是(shì)相對(duì)於(yú)瀏覽(lǎn)器(qì)而言(yán)，盒模型的寬度(dù)隨(suí)著(zhuó)瀏覽器(qì)寬度(dù)的(dí)改(gǎi)變(biàn)而(ér)改變(biàn)。這(zhè)時要(yào)用到(dào)寬度的(dí)百(bǎi)分(fēn)比(bǐ)。當一(yī)個盒模(mó)型(xíng)不設置寬(kuān)度時(shí)，它默認是相對於瀏覽器顯示的。我們(mén)把(bǎ)剛(gāng)才(cái)的固(gù)定寬(kuān)度(dù)例(lì)子中的寬(kuān)度去掉看看：
#layout { height: 300px; background: #99FFcc;}
有些朋友(yǒu)可(kě)能(néng)要問(wèn)了，那(nà)為什麼還(huán)有(yǒu)那麼寬的(dí)白(bái)邊呢？這(zhè)個是(shì)由body默(mò)認的外邊距造成(chéng)的(dí)。當(dāng)我們不用(yòng)任(rèn)何(hé)樣式表(biǎo)進行定義(yì)時，body，h1－h6，ul等元素默(mò)認有(yǒu)外邊距(jù)或其(qí)它(tā)樣式(shì)的(dí)。這裏我們在(zài)css樣(yàng)式中(zhōng)增(zēng)加(jiā)一項：body {margin:0;}，就可以(yǐ)把body默認(rèn)的外邊距去掉(diào)，這(zhè)時(shí)再預(yù)覽一下，白(bái)邊就(jiù)沒(méi)了。
body { margin: 0px; }
#layout { height: 300px; background: #99FFcc;}
這(zhè)裏(lǐ)的選擇器(qì)類(lèi)型是新手(shǒu)朋(péng)友(yǒu)最容易(yì)迷糊的地(dì)方(fāng)，類：是指定義一(yī)個(gè)class，可以(yǐ)多(duō)個對(duì)象(xiàng)引用；標簽：指對(duì)默(mò)認(rèn)的html標簽(qiān)進行重新定(dìng)義，如可以(yǐ)定義body{margin:0}，意思是 將(jiāng)body的(dí)外(wài)邊(biān)距(jù)設置為0，h2{color:#f00}是(shì)將(jiāng)所有h2標簽的文字顏色設(shè)置(zhì)為紅色(sè)；高級它把ID和偽類放到(dào)一(yī)塊了，是一個設置不(bù)合理的地方，在cs4版本中已經分(fēn)開(kāi)了(liǎo)。ID是以#開始，id隻(zhī)能作用於(yú)一個對(duì)象，不(bù)能(néng)作(zuò)用於(yú)多(duō)個對(duì)象(xiàng)，優先級(jí)高(gāo)於class，這是id和class的區(qū)別。偽(wěi)類(lèi)會(huì)在第(dì)九節(jié)時(shí)詳(xiáng)細(xì)講解(jiě)
如(rú)果我(wǒ)們(mén)需要按瀏覽(lǎn)器的(dí)80%顯(xiǎn)示，那麼設(shè)置寬度為(wéi)80%，當(dāng)改(gǎi)變(biàn)瀏(liú)覽(lǎn)器(qì)窗(chuāng)口大小時(shí)，盒模型的(dí)寬度也會跟(gēn)著(zhuó)改(gǎi)變(biàn)。
代碼原文(wén)：
<!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" />
<style type="text/css">
body { margin:0;}
#layout { height: 300px; width: 80%; background: #99FFcc; }
</style>
</head>
<body>
<div id="layout">此(cǐ)處顯示 id "layout" 的內(nèi)容</div>
</body>
</html>
四(sì)，一(yī)列自適應寬(kuān)度(dù)居中
同(tóng)樣和(hé)固定寬(kuān)度居(jū)中一樣(yàng)，我們隻需要設(shè)置div的(dí)外(wài)邊距為(wéi)auto即可(kě)實現居中了(liǎo)。
body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }
代碼原文(wén)：
<!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" />
<style type="text/css">
body { margin:0;}
#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}
</style>
</head>
<body>
<div id="layout">此處顯示 id "layout" 的(dí)內容</div>
</body>
</html>
五，一列(liè)二(èr)至多塊布局
一般的網站(zhàn)整體可以分為(wéi)上中(zhōng)下結構，即(jí)：頭(tóu)部，中間主(zhǔ)體(tǐ)，底(dǐ)部(bù)。那(nà)麼我(wǒ)們可(kě)以用(yòng)三個div塊來劃(huá)分，分(fēn)別給(gěi)它們起名為(wéi)：頭部(bù)（header），主體(tǐ)（maincontent），詢問(wèn)（footer）。
采用固(gù)定(dìng)寬度(dù)居(jū)中(zhōng)的(dí)方式，代碼(mǎ)如下：
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;}
為了(liǎo)便於區分，在背景項裏設置(zhì)了背景(jǐng)色，這裏不(bù)在貼(tiē)圖。依此類推，把另外兩個(gè)div塊給置好，整個(gè)效果(guǒ)就出來了。這(zhè)是(shì)一(yī)個大(dà)多數網(wǎng)站(zhàn)采用(yòng)的上中(zhōng)下(xià)布局結構(gòu)。
代碼原(yuán)文：
<!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" />
<style type="text/css">
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;}
</style>
</head>
<body>
<div id="header">此處顯示(shì) id "header" 的(dí)內(nèi)容</div>
<div id="main">此(cǐ)處(chǔ)顯示 id "main" 的(dí)內(nèi)容(róng)</div>
<div id="footer">此(cǐ)處顯示(shì) id "footer" 的(dí)內容</div>
</body>
</html>
許(xǔ)多朋友在問：為什麼兩個(gè)相鄰(lín)的容器中間(jiān)的間距不是10px，而是(shì)5px呢(ní)？按照我(wǒ)們正常的(dí)理解，認(rèn)為應(yīng)該(gāi)是兩(liǎng)個值相(xiāng)加，其實這裏(lǐ)是(shì)兩(liǎng)個合(hé)並後取最大(dà)值(zhí)。用css手冊(cè)中的(dí)話(huà)說(shuō)：塊級元(yuán)素的垂直相鄰(lín)外邊(biān)距會合並(bìng)，而行(háng)內元(yuán)素(sù)實(shí)際上不(bù)占(zhān)上(shàng)下外邊(biān)距。行內元(yuán)素(sù)的的左(zuǒ)右外(wài)邊距不會(huì)合並。同(tóng)樣地，浮動(dòng)元(yuán)素的外邊(biān)距也(yě)不會合並。允(yǔn)許(xǔ)指定(dìng)負的外(wài)邊(biān)距值(zhí)，不(bù)過使(shǐ)用時要小(xiǎo)心(xīn)（有關塊級元(yuán)素(sù)和(hé)行內元(yuán)素的(dí)概念(niàn)在下(xià)一節講到）。
六，小(xiǎo)結
本節(jié)課涉(shè)及(jí)到(dào)以(yǐ)下知(zhī)識(shí)點：
1，CSS可視化生成，格式化(huà)
本教程(chéng)便(biàn)於新手(shǒu)學習，采(cǎi)用dw的(dí)css可(kě)視化生成方(fāng)式，熟(shú)練後的朋友盡量(liáng)手寫，這樣可以提(tí)高(gāo)工作效(xiào)率。目前來說，希望(wàng)常用(yòng)的大(dà)家(jiā)都(dū)能記(jì)住。關(guān)於(yú)css的格(gé)式化，指css的(dí)排版(bǎn)方式(shì)，細(xì)心(xīn)的朋(péng)友(yǒu)已(yǐ)發現(xiàn)，我在這(zhè)裏貼出的(dí)css代(dài)碼，每個類(lèi)或ID都是寫(xiě)在一(yī)行的。可能(néng)你的(dí)還是分成多(duō)行，怎麼把(bǎ)它們(mén)弄(nòng)到一行上呢？請看(kàn)下麵的代碼和(hé)圖示：
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;
}
經(jīng)過以上三步之後(hòu)，看(kàn)看(kàn)，你的(dí)代(dài)碼是不(bù)是(shì)和我(wǒ)的一樣了(liǎo)。
2，CSS縮寫
css的許多屬(shǔ)性是(shì)可以(yǐ)簡(jiǎn)寫(xiě)的，這樣便(biàn)於(yú)閱讀和(hé)修改，減(jiǎn)少(shǎo)代碼量，設(shè)置(zhì)方法如下(xià)：
把需要縮寫的項(xiàng)目(mù)選(xuǎn)中，再生成的(dí)css代(dài)碼即為簡(jiǎn)寫形式(shì)了(liǎo)。這(zhè)裏(lǐ)所說的是多個(gè)屬性(xìng)合(hé)並(bìng)到一塊的簡(jiǎn)寫(xiě)方式，另外像顏色值了也可以(yǐ)簡寫的(dí)。比如(rú)顏色值(zhí)為#ff6600;可以簡(jiǎn)寫(xiě)為(wéi)#f60;兩(liǎng)位兩位(wèi)一樣的(dí)才可(kě)以簡寫，像#c2c2c2是不(bù)可(kě)以簡寫的(dí)。
3，CSS語法
如圖(tú)所示(shì)，CSS語(yǔ)法(fǎ)由如下三部分構成，選擇器：可以(yǐ)是(shì)ID，CLASS或標簽(qiān)；屬性(xìng)和(hé)值(zhí)是(shì)用來定義這個物件(jiàn)的(dí)某一個(gè)特性(xìng)。如(rú)一張桌子的長3000px，寬1500px，套(tào)用(yòng)css的(dí)格(gé)式為(wéi)，桌子(zǐ){長:3000px;寬:1500px;}，這樣(yàng)是(shì)不是容易理(lǐ)解(jiě)。
4，ID和(hé)CLASS選擇(zé)器
id隻能(néng)在頁(yè)麵中(zhōng)對(duì)應一(yī)個(gè)元素，就(jiù)像(xiàng)我(wǒ)們的(dí)身(shēn)份(fèn)證號一(yī)樣(yàng)，每個人(rén)的都不(bù)一(yī)樣；class為(wéi)類(lèi)，可(kě)以對(duì)應多(duō)個(gè)元素(sù)，比如說一(yī)年級(jí)三(sān)班(bān)的(dí)學生(shēng)，它所(suǒ)對應(yīng)的(dí)可能是(shì)10個20個學(xué)生。
id的(dí)優先級(jí)高於(yú)class，比(bǐ)如說今天三(sān)班的學生上(shàng)體(tǐ)育(yù)課，小明留(liú)下來(lái)打掃(sǎo)衛生。那(nà)麼(mó)三(sān)班的(dí)學生上體育課這(zhè)是(shì)一(yī)個類，而小明打掃衛生這(zhè)是個id，雖然小明也是三(sān)班(bān)的學生，但id高(gāo)於class，所(suǒ)以(yǐ)小(xiǎo)明執行(háng)打掃衛(wèi)生(shēng)的(dí)任務。
文(wén)章出(chū)處：標準之路(lù) 編輯：楊(yáng)雨(yǔ)晨思
轉載請保(bǎo)留原文地址(zhǐ): https://antelcom.cn/show-342.html