|
第三步
現(xiàn)在，我們需要兩張背景圖片。一張大的，存成JPG后大約56kb。這個(gè)尺寸在過去稍嫌太大，不過現(xiàn)在這不足為道。
另一張窄條圖片，作為主體區(qū)域的背景，將不斷重復(fù)向右，拖動(dòng)瀏覽器窗口時(shí)它也會(huì)隨之向外平鋪。
（注意：下圖中的Logo不應(yīng)該顯示在背景圖片里，抱歉這是張不太好的截圖）
你可以分別在 這里 和 這里 看到我創(chuàng)建的兩張圖片。
第四步
好了，我們現(xiàn)在開始寫HTML。首先我們列出一些基本代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns="<head>
<title>PSD vs NET</title>
<link rel="stylesheet" href="step1_style.css" type="text/css" media="screen" />
</head>
<body>
<div id="outside_container">
<div id="container">
<!-- The Main Area -->
</div>
</div>
<div id="footer">
<img src="images/footer_logo.jpg" />
<span id="footer_text">
Made for a PSDTUTS and NETTUTS tutorial by Collis!
See the <a href="Photoshop'>http://psdtuts.com">Photoshop Tutorial</a>,
see the <a href="Web'>http://nettuts.com">Web Tutorial</a>
</span>
</div>
</body>
</html>
通常，我們最好由外向內(nèi)進(jìn)行布局。我在這里置入3個(gè)主要的<div>，前兩個(gè)是outside_container / container，另外一個(gè)是footer. 這需要一些說明：
- 我同時(shí)創(chuàng)建outside_container 和 container是為了實(shí)現(xiàn)雙重背景圖像——一張小圖平鋪，一張大圖置頂。在outside_container里我將放入平鋪背景，在container 里我將放入大幅的主背景圖，而container將出現(xiàn)在outside_container頂部。
- footer需要置于兩個(gè)container之外，是為了讓footer在瀏覽器窗口縱向延伸時(shí)不停向下。既然它自己有一個(gè)背景，就不能在container之內(nèi)，若非如此，你可能會(huì)在把窗口拉到某個(gè)程度時(shí)看到container的背景而不是footer的！
你還看到我在footer里加了一些內(nèi)容——小logo和一段文字。我把這段文字包在一個(gè)<span>標(biāo)簽里以便后續(xù)操作。而既然footer里只有一張圖片，我們沒理由再給<img>標(biāo)簽一個(gè)id或class，只要稱之為#footer img就可以了。這樣可以讓我們的HTML更簡單一些。
出處：譯言
責(zé)任編輯：bluehearts
上一頁 用CSS布局建站從零開始 [1] 下一頁 用CSS布局建站從零開始 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 用CSS布局建站從零開始 [2]
