HTML的局限性迫使設(shè)計(jì)師們?nèi)ラ_發(fā)更聰明的方式來使他們的網(wǎng)頁更美觀。過去最常用的工具是<table>標(biāo)簽，它本是用來創(chuàng)建電子數(shù)據(jù)表――比如由數(shù)據(jù)行和列組成的信息顯示表。但是設(shè)計(jì)師們卻用HTML的表格來創(chuàng)建一種用來組織網(wǎng)頁內(nèi)容的腳手架（見圖11-1）。可是由于<table>標(biāo)簽本來不是要用于布局的，因此設(shè)計(jì)師們不得不經(jīng)常以各種不尋常的方式來使用這個(gè)標(biāo)簽――比如把一個(gè)表格放在另一個(gè)表格的單元里面――僅僅為了得到他們想要的效果。這種方法的工作量很大，增加了大量額外的HTML代碼，并使得后面要修改設(shè)計(jì)很難。但是在CSS出現(xiàn)之前，那就是網(wǎng)頁設(shè)計(jì)師們所擁有的一切辦法。
如果你已經(jīng)習(xí)慣于使用<table>標(biāo)簽，那么當(dāng)你開始使用CSS進(jìn)行布局時(shí)，必須發(fā)展一種新的思維。首先，忘掉行和列（運(yùn)用表格時(shí)的一種重要的觀念）。沒有列跨度、行跨度和格子狀的表格結(jié)構(gòu)在CSS中是找不到的。然而，你可以把一個(gè)<div>標(biāo)簽當(dāng)成一個(gè)表格單元。有了表格單元，<div>標(biāo)簽就是把你要的內(nèi)容定位在網(wǎng)頁區(qū)域的一個(gè)邏輯位置。此外，如你所見，CSS設(shè)計(jì)經(jīng)常把一個(gè)div嵌套在另一個(gè)div里面，就像你把表格嵌套在表格里面來獲得特定的效果一樣――但是，幸運(yùn)的是，CSS方法只用少得多的HTML代碼。
強(qiáng)大的<div>標(biāo)簽
The Mighty <div> Tag
無論使用表格還是CSS，網(wǎng)頁布局都是把大塊的內(nèi)容放進(jìn)網(wǎng)頁的不同區(qū)域里面。有了CSS，最常用來組織內(nèi)容的元素就是<div>標(biāo)簽。如第18頁所述，<div>標(biāo)簽是沒有固有格式化屬性的一個(gè)HTML元素（除了瀏覽器把這個(gè)標(biāo)簽當(dāng)成前后有換行的塊之外）；反之，它被用來標(biāo)識元素的一個(gè)邏輯組合或者網(wǎng)頁中的一個(gè)分區(qū)。
你將代表性地把一大塊屬于一起的HTML包圍在一個(gè)<div>里面。圖11-1中包含logo和導(dǎo)航欄的元素占據(jù)了網(wǎng)頁頂部，因此用一個(gè)<div>標(biāo)簽把它們包圍起來很有意義。至少，你要給網(wǎng)頁的所有主要區(qū)域包含<div>標(biāo)簽，例如橫幅、主要內(nèi)容區(qū)域、工具條、頁腳，等等。但是它也可能把一個(gè)或者更多的div包在一個(gè)<div>里面。一種最常用的方法就是把<body>標(biāo)簽里面的HTML包在一個(gè)<div>里面。然后可以通過把CSS應(yīng)用到包裝<div>，設(shè)置基礎(chǔ)的頁面屬性。你可以給網(wǎng)頁內(nèi)容設(shè)定一個(gè)整體的寬度，設(shè)置左邊距和右邊距，或者把所有網(wǎng)頁內(nèi)容在屏幕的中間居中。
一旦已經(jīng)把<div>標(biāo)簽放在了適當(dāng)?shù)奈恢蒙?，再給每個(gè)<div>標(biāo)簽添加一個(gè)類或者ID，變成你分別對每個(gè)<div>定義樣式的句柄。對于只出現(xiàn)一次和形成網(wǎng)頁的基本構(gòu)建塊的網(wǎng)頁部位，設(shè)計(jì)師們通常使用一個(gè)ID。一個(gè)網(wǎng)頁橫幅區(qū)域的<div>標(biāo)簽看起來可能像這樣：<div id="banner">。你可以對一個(gè)ID每頁只使用一次，因此當(dāng)有一個(gè)多次顯示的元素時(shí)，就用一個(gè)類代替。如果你有幾個(gè)定位照片和照片說明的div時(shí)，可以創(chuàng)建一個(gè)樣式像這樣：<div class="photo">。
有了類似這些的樣式，就可以定位各種各樣的網(wǎng)頁元素了。利用CSS的float屬性，你可以定位不同的內(nèi)容塊給一張網(wǎng)頁的左邊或者右邊（或者一個(gè)包含塊比如另一個(gè)<div>的左邊或者右邊）。
至理名言
更多并非更好
雖然div對于CSS布局很重要，但也別對你的網(wǎng)頁濫用div。一個(gè)常見的陷阱是相信你必須把一張網(wǎng)頁中的一切都包圍在一個(gè)<div>標(biāo)簽里面。假設(shè)你的主導(dǎo)航欄是一個(gè)鏈接的無序列表。由于它是一個(gè)重要的元素，你可能會試探用一個(gè)<div>來把它圍起來：<div id="mainNav"><ul>...</ul></div>。但是當(dāng)<ul>標(biāo)簽唾手可得時(shí)，就沒有必要去添加一個(gè)<div>了。只要<ul>包含主要的導(dǎo)航欄鏈接，就只需添加ID樣式給這個(gè)標(biāo)簽：<ul id= "mainNav">。多余的<div>只是一些沒有必要的代碼。
如果你已經(jīng)習(xí)慣于使用<table>標(biāo)簽，那么當(dāng)你開始使用CSS進(jìn)行布局時(shí)，必須發(fā)展一種新的思維。首先，忘掉行和列（運(yùn)用表格時(shí)的一種重要的觀念）。沒有列跨度、行跨度和格子狀的表格結(jié)構(gòu)在CSS中是找不到的。然而，你可以把一個(gè)<div>標(biāo)簽當(dāng)成一個(gè)表格單元。有了表格單元，<div>標(biāo)簽就是把你要的內(nèi)容定位在網(wǎng)頁區(qū)域的一個(gè)邏輯位置。此外，如你所見，CSS設(shè)計(jì)經(jīng)常把一個(gè)div嵌套在另一個(gè)div里面，就像你把表格嵌套在表格里面來獲得特定的效果一樣――但是，幸運(yùn)的是，CSS方法只用少得多的HTML代碼。
強(qiáng)大的<div>標(biāo)簽
The Mighty <div> Tag
無論使用表格還是CSS，網(wǎng)頁布局都是把大塊的內(nèi)容放進(jìn)網(wǎng)頁的不同區(qū)域里面。有了CSS，最常用來組織內(nèi)容的元素就是<div>標(biāo)簽。如第18頁所述，<div>標(biāo)簽是沒有固有格式化屬性的一個(gè)HTML元素（除了瀏覽器把這個(gè)標(biāo)簽當(dāng)成前后有換行的塊之外）；反之，它被用來標(biāo)識元素的一個(gè)邏輯組合或者網(wǎng)頁中的一個(gè)分區(qū)。
你將代表性地把一大塊屬于一起的HTML包圍在一個(gè)<div>里面。圖11-1中包含logo和導(dǎo)航欄的元素占據(jù)了網(wǎng)頁頂部，因此用一個(gè)<div>標(biāo)簽把它們包圍起來很有意義。至少，你要給網(wǎng)頁的所有主要區(qū)域包含<div>標(biāo)簽，例如橫幅、主要內(nèi)容區(qū)域、工具條、頁腳，等等。但是它也可能把一個(gè)或者更多的div包在一個(gè)<div>里面。一種最常用的方法就是把<body>標(biāo)簽里面的HTML包在一個(gè)<div>里面。然后可以通過把CSS應(yīng)用到包裝<div>，設(shè)置基礎(chǔ)的頁面屬性。你可以給網(wǎng)頁內(nèi)容設(shè)定一個(gè)整體的寬度，設(shè)置左邊距和右邊距，或者把所有網(wǎng)頁內(nèi)容在屏幕的中間居中。
一旦已經(jīng)把<div>標(biāo)簽放在了適當(dāng)?shù)奈恢蒙?，再給每個(gè)<div>標(biāo)簽添加一個(gè)類或者ID，變成你分別對每個(gè)<div>定義樣式的句柄。對于只出現(xiàn)一次和形成網(wǎng)頁的基本構(gòu)建塊的網(wǎng)頁部位，設(shè)計(jì)師們通常使用一個(gè)ID。一個(gè)網(wǎng)頁橫幅區(qū)域的<div>標(biāo)簽看起來可能像這樣：<div id="banner">。你可以對一個(gè)ID每頁只使用一次，因此當(dāng)有一個(gè)多次顯示的元素時(shí)，就用一個(gè)類代替。如果你有幾個(gè)定位照片和照片說明的div時(shí)，可以創(chuàng)建一個(gè)樣式像這樣：<div class="photo">。
有了類似這些的樣式，就可以定位各種各樣的網(wǎng)頁元素了。利用CSS的float屬性，你可以定位不同的內(nèi)容塊給一張網(wǎng)頁的左邊或者右邊（或者一個(gè)包含塊比如另一個(gè)<div>的左邊或者右邊）。
至理名言
更多并非更好
雖然div對于CSS布局很重要，但也別對你的網(wǎng)頁濫用div。一個(gè)常見的陷阱是相信你必須把一張網(wǎng)頁中的一切都包圍在一個(gè)<div>標(biāo)簽里面。假設(shè)你的主導(dǎo)航欄是一個(gè)鏈接的無序列表。由于它是一個(gè)重要的元素，你可能會試探用一個(gè)<div>來把它圍起來：<div id="mainNav"><ul>...</ul></div>。但是當(dāng)<ul>標(biāo)簽唾手可得時(shí)，就沒有必要去添加一個(gè)<div>了。只要<ul>包含主要的導(dǎo)航欄鏈接，就只需添加ID樣式給這個(gè)標(biāo)簽：<ul id= "mainNav">。多余的<div>只是一些沒有必要的代碼。
標(biāo)簽：CSS布局
