CSS入門(mén)教程

　　從本篇開(kāi)始講述如何用css實(shí)現網(wǎng)頁(yè)的布局，即如何用css控制網(wǎng)頁(yè)內各個(gè)元素的顯示位置。如果你是一個(gè)初學(xué)者，很可能覺(jué)得做一個(gè)網(wǎng)頁(yè)的第一步就是布局。其實(shí)不然，css網(wǎng)頁(yè)的設計過(guò)程可以參考分為以下幾步：

　　平面設計—>頁(yè)面切割—>布局—>細節控制 平面設計是一個(gè)網(wǎng)頁(yè)的精髓所在，讀者直接面對的界面，在本站以后的文章中會(huì )涉及此方面內容。也許你會(huì )認為在腦子里形成一個(gè)網(wǎng)站的大概印象就可以了，那么這種想法直接就給你貼上業(yè)余的標簽。推薦工具：Photoshop； 頁(yè)面切割其實(shí)可以劃分到布局里，因為你的頁(yè)面切割方式直接影響了布局方式，也體現了你是屬于表格布局陣營(yíng)還是css布局陣營(yíng)。它是布局(前)的關(guān)鍵步驟。將在本章重點(diǎn)講述。推薦工具：Photoshop； 如果把布局說(shuō)簡(jiǎn)單點(diǎn)，就先得把你的網(wǎng)頁(yè)簡(jiǎn)單化。簡(jiǎn)單到把你的網(wǎng)站分為header，content，sidebar，footer四個(gè)部分。 細節控制，將header，content，sidebar，footer的表現細節化。

　　本章將針對頁(yè)面切割講述一些Jorux的私人觀(guān)點(diǎn)與技術(shù)。

　　首先，我們要有一個(gè)被切割的對象，這里以Jorux.com的原始photoshop平面設計圖為例。如下（Fig.01）：

　　點(diǎn)擊查看大圖

　　如果使用表格布局的話(huà)，你可能就想到在photoshop里把頁(yè)面切割為無(wú)數個(gè)固定寬高的格子。但用css布局的話(huà)，你首先要明確的以下幾點(diǎn)是： 你是要橫著(zhù)切，還是要豎著(zhù)切； 第一次切割，只需要把網(wǎng)頁(yè)中的背景圖片切割出來(lái)(因為背景圖片是在css里聲明的)； 切的的圖片要盡量小，然后讓css去做更多的事情； 設計比較復雜的部分，可以不分割，從而減少css編碼的難度； 讀者應該根據自己的能力，找出哪些效果css可以輕松實(shí)現，而哪些效果用圖片更加簡(jiǎn)單而且size不大，仔細在3.4之間權衡利弊；

　　現在我們來(lái)看Fig.01, 最靠上的部分是個(gè)黑色的尺子，遮住了“Jorux記事本”，更遭的是它居然還有黑色的投影。等到要切割的時(shí)候，我才后悔當初怎么能設計得如此復雜。但沒(méi)關(guān)系，一切都會(huì )好起來(lái)的�，F在跟著(zhù)來(lái)重溫我的切割思路：

　　1. 整個(gè)網(wǎng)頁(yè)背景色大家應該很清楚，就是深灰色#444，這無(wú)需圖片，在css里的body選擇器里聲明就好；

　　2. 這一步是最關(guān)鍵的一步，請讀者仔細體會(huì )。對于css布局的網(wǎng)頁(yè)，Jorux建議你首先給你的原始平面設計來(lái)兩個(gè)橫刀(紅色)，接著(zhù)就來(lái)個(gè)豎刀(藍色)。實(shí)現如下效果(Fig.02)：

　　點(diǎn)擊查看大圖

　　一定要先橫再豎，即先把你的網(wǎng)頁(yè)分為top，mid，bottom三個(gè)部分，然后再把mid分為content和sidebar兩個(gè)部分。對于單欄樣式，只需要兩橫刀，而對于三欄樣式，可能就需要兩橫兩豎刀。

　　這樣你就得到header，content，sidebar，footer四個(gè)部分�，F在來(lái)分析這四個(gè)部分的背景圖片需要如何切割。