|
第一步
下面是我們將要?jiǎng)邮种谱鞯脑O(shè)計(jì)圖。如前所述，你可以閱讀 PSDTUTS上的這篇教程 來(lái)學(xué)習(xí)如何做出這樣的設(shè)計(jì)圖。在這篇教程里我們只制作首頁(yè)，不過(guò)你可以以此為基礎(chǔ)用相同的布局制作內(nèi)頁(yè)。
第二步
首先要做的是確定頁(yè)面結(jié)構(gòu)。隨著你對(duì)CSS布局的逐步學(xué)習(xí)，這個(gè)過(guò)程會(huì)變得越來(lái)越簡(jiǎn)單。通過(guò)運(yùn)用大量絕對(duì)定位和大幅背景圖片，我們可以非常簡(jiǎn)單地完成這個(gè)設(shè)計(jì)。
什么是絕對(duì)定位？
一個(gè)HTML元素（比如<div>、<p>等等）被放入頁(yè)面時(shí)具有一個(gè)天生的位置，這個(gè)位置是由之前放入的元素確定的。例如，你放入一個(gè)填充了文字的<p></p>標(biāo)簽，接著放入另一個(gè)<p></p>，它會(huì)自然出現(xiàn)在第一個(gè)<p>下方。每個(gè)元素相對(duì)于上一個(gè)元素流動(dòng)。
絕對(duì)定位則不同，它給一個(gè)對(duì)象指定精確的位置使它脫離常規(guī)的元素流。如果你像之前一樣放入第一個(gè)<p></p>，然后絕對(duì)定位第二個(gè)<p></p>為 left:500px; top:500px，那它就會(huì)無(wú)視第一個(gè)<p>準(zhǔn)確無(wú)誤地出現(xiàn)在指定的位置。
你可以像這樣設(shè)置絕對(duì)定位：
.className {
position:absolute;
top:0px;
left:0px;
}
絕對(duì)定位的缺點(diǎn)
使用絕對(duì)定位的主要問(wèn)題是你的元素們不會(huì)真正地相互關(guān)聯(lián)。例如，你在靠近頁(yè)面頂端的地方放置了一個(gè)文本塊，然后稍靠下放置另一個(gè)，當(dāng)每一個(gè)塊的文本都較短時(shí)這看上去很好。但如果頂部的塊內(nèi)是一篇長(zhǎng)文，它就會(huì)越過(guò)第二個(gè)塊，而不是把第二個(gè)塊推向下方。
所以絕對(duì)定位只對(duì)那些尺寸固定并且不需要與其他元素互動(dòng)的元素真正有效。
為什么本例中我們要用絕對(duì)定位？
因?yàn)榻^對(duì)定位的好處就在于，它真的、真的非常簡(jiǎn)單！你告訴瀏覽器東西往哪兒放它就往哪兒放！更棒的是，當(dāng)你使用絕對(duì)定位時(shí)，瀏覽器兼容性問(wèn)題會(huì)大大減少。畢竟不管你用的是Firefox、Internet Explorer還是Safari，100px總歸是100px。
嗯...該開(kāi)始我們的布局了
我們將要制作網(wǎng)站的方法是：
- 使用大尺寸的背景圖片
- 絕對(duì)定位Logo、菜單和頭部面板，讓它們精確地出現(xiàn)該出現(xiàn)的地方
- 將content（內(nèi)容）放入慣用的<div>標(biāo)簽，但設(shè)置很高的padding-top（頂部?jī)?nèi)邊距）好讓content向下推到該出現(xiàn)的地方
- 讓footer（頁(yè)腳）坐鎮(zhèn)底部
如果上述說(shuō)明還不能讓你有一個(gè)整體的感覺(jué)，先別著急，當(dāng)你看到網(wǎng)站成型的時(shí)候就會(huì)了解了！
出處：譯言
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 用CSS布局建站從零開(kāi)始 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 用CSS布局建站從零開(kāi)始 [1]
第 2 頁(yè) 
