|
第五步
到目前為止我們的代碼所需的CSS：
body {
margin:0px; padding:0px;
background-color:#11090a;
font-family:Arial, Helvetica, sans-serif;
}
#outside_container {
background:url(images/background_slice.jpg) repeat-x #000000;
}
#container {
background:url(images/background_main.jpg) no-repeat;
min-height:800px;
}
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
}
一條一條來(lái)看：
- 首先我們重新定義了body標(biāo)簽。我差不多總是會(huì)先做這件事。我們除去默認(rèn)的margin和padding，設(shè)置頁(yè)面背景顏色和字體。注意，這里的背景顏色實(shí)際上也是footer的背景顏色。如前所述，這樣做是為了讓你在縱向拉伸窗口時(shí)也能一直看到footer。
- 然后，我用那張窄條背景圖片填充outside_container標(biāo)簽，圖片只沿x軸（即從左向右）重復(fù)，沒(méi)有背景圖的地方我們會(huì)直接看到黑色 (#000000)。由于我們只橫向平鋪，頁(yè)面拉長(zhǎng)時(shí)我們不會(huì)看到向下延續(xù)的圖片，而是看到黑色的背景。漸變成黑色的平鋪圖片讓這一切表現(xiàn)完美！
- 接下來(lái)輪到container了。我們將大背景圖設(shè)為不重復(fù)的，它只出現(xiàn)一次。注意，因?yàn)檫@個(gè)<div>標(biāo)簽在前一個(gè)的內(nèi)部，會(huì)伸展至將其填滿，所以我們沒(méi)有指定背景顏色。如果指定的話它將覆蓋我們的outside_container，而不是像現(xiàn)在這樣，在頁(yè)面頂部的背景圖外圍你仍可以看到outside_container的背景。
- 我還賦予了container一個(gè)最小高度，這樣我們可以大致看到有內(nèi)容的網(wǎng)頁(yè)會(huì)是什么樣子。 稍后這個(gè)最小高度可以由我們的內(nèi)容來(lái)產(chǎn)生。
- footer基本上只有一個(gè)單線border加一些padding，沒(méi)必要再賦予它背景顏色，因?yàn)槲覀円呀?jīng)在<body>里設(shè)置過(guò)了。記住，padding的定義方法如下padding: top right bottom left（順時(shí)針?lè)较颍。?
我們現(xiàn)在到這兒了...
看看目前的網(wǎng)站
第六步
接下來(lái)我們加上其他一些樣式來(lái)結(jié)束footer的定義：
/*
Footer
*/
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
color:#674f5d;
font-size:9px;
line-height:14px;
}
#footer img {
float:left;
margin-right:10px;
}
#footer span {
display:block;
float:left;
width:250px;
}
#footer a {
color:#9e8292;
text-decoration:none;
}
#footer a:hover { color:#ffffff; }
如上，我在#footer樣式里加了點(diǎn)東西并創(chuàng)建了幾個(gè)新的樣式。還是一條一條來(lái)看：
首先，位于/*和*/之間的這些玩意兒是CSS注釋。添加注釋有利于劃分CSS文件使其便于理解。實(shí)際上我發(fā)現(xiàn)如果不加注意，大型項(xiàng)目中的CSS文件相當(dāng)可能變得失去控制。盡早形成好習(xí)慣吧：正確命名你的選擇器，添加注釋，聚合相似的樣式，為大型項(xiàng)目拆分出多個(gè)CSS文件等等。
在#footer中，我在之前的定義上添加了font color（字體顏色）、font size（字體尺寸）和line-height（行間距）。line-height是非常有用的文本屬性，它可以幫你間隔文本。沒(méi)有定義好行間距的文本看上去擠成一團(tuán)難以閱讀。但過(guò)大的行間距也會(huì)讓文本隔得太開(kāi)，看上去怪怪的。你可能要多試試看不同的字體和尺寸適合多大的行距。本例中14px似乎剛剛好。
接下來(lái)我把#footer img和#footer span都設(shè)為float:left，從而使兩個(gè)標(biāo)簽緊挨著排成兩列。我將在下文中深入探討浮動(dòng)和列的問(wèn)題。
最后，我們告訴瀏覽器怎么處理出現(xiàn)在footer里的<a>標(biāo)簽（即鏈接）：沒(méi)有下劃線，在鼠標(biāo)懸停時(shí)要變色。
加上這些后我們到了這里：
看看目前的網(wǎng)站
出處：譯言
責(zé)任編輯：bluehearts
上一頁(yè) 用CSS布局建站從零開(kāi)始 [2] 下一頁(yè) 用CSS布局建站從零開(kāi)始 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 用CSS布局建站從零開(kāi)始 [3]
