原文:http://jorux.com/archives/layout-1-if-you-love-CSS/
從本篇開始講述如何用css實現網頁的布局,即如何用css控制網頁內各個元素的顯示位置。如果你是一個初學者,很可能覺得做一個網頁的第一步就是布局。其實不然,CSS網頁的設計過程可以參考分為以下幾步:
平面設計—>頁面切割—>布局—>細節控制
本章將針對頁面切割講述一些Jorux的私人觀點與技術。
首先,我們要有一個被切割的對象,這裡以Jorux.com的原始Photoshop平面設計圖為例。如下(Fig.01):
點擊查看大圖
如果使用表格布局的話,你可能就想到在Photoshop裡把頁面切割為無數個固定寬高的格子。但用CSS布局的話,你首先要明確的以下幾點是:
現在我們來看Fig.01, 最靠上的部分是個黑色的尺子,遮住了“Jorux記事本”,更遭的是它居然還有黑色的投影。等到要切割的時候,我才後悔當初怎麼能設計得如此復雜。但沒關系,一切都會好起來的。現在跟著來重溫我的切割思路:
1. 整個網頁背景色大家應該很清楚,就是深灰色#444,這無需圖片,在CSS裡的body選擇器裡聲明就好;
2. 這一步是最關鍵的一步,請讀者仔細體會。對於CSS布局的網頁,Jorux建議你首先給你的原始平面設計來兩個橫刀(紅色),接著就來個豎刀(藍色)。實現如下效果(Fig.02):
點擊查看大圖
一定要先橫再豎,即先把你的網頁分為top,mid,bottom三個部分,然後再把mid分為content和sidebar兩個部分。對於單欄樣式,只需要兩橫刀,而對於三欄樣式,可能就需要兩橫兩豎刀。
這樣你就得到header,content,sidebar,footer四個部分。現在來分析這四個部分的背景圖片需要如何切割。
3. header部分的圖片非常復雜,但要把那把尺子單獨分離出來幾乎是不可能的,而且是沒有必要的。因為我們還需用這把尺子實現回首頁的超級鏈接,因此它只能是在Html文件中<img/>的圖片,而非背景,為了減少CSS編碼難度,我們可以把有投影的圓角也和尺子一起切下來以備用,如圖(Fig.03):
點擊查看大圖
那麼剩下的稍淡的灰色,就是所需要header的背景,我們只需來兩豎刀(寬度在4-6px左右為宜),得到下圖(Fig.04):
相信大家知道如何在CSS裡用repeat-x來實現header的背景效果;
4. 接著就是content的背景,很容易看出就是那個帶投影的白色背景。馬上來上兩橫刀,高度同樣在4-6px為宜,如下圖(Fig.05),在CSS裡用repeat-y就能實現content背景;
點擊查看大圖
5. 還好,在本設計中sidebar無背景,直接繼承body的灰色背景就好;
6. footer背景比較簡單,就是兩個圓角而已,我為了圖方便,把那個logo也切了下來,如下(Fig.06):
點擊查看大圖
這樣我們就完成了第一次切割,並且把一切涉及布局的背景圖片切了下來。接著就是如何用CSS布局了,我們的目標是實現以下效果圖(Fig.07):
點擊查看大圖
那麼現在就開始編寫html代碼。既然我們有了一清晰的布局效果圖,編寫Html代碼應該是很簡單的一件事情。但是越是簡單的事,人們忽略的東西就越多。以下Jorux的觀點請一定仔細考量:
***對於DIV的使用,請一定從大到小,把那些能在一起的元素劃分到一個DIV,然後再在此DIV中繼續劃分小DIV。所以為實現(Fig.07)的效果圖,需要做以下幾步:
最終得到Html代碼為:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD Html 4.0 Transitional//EN”>
<Html>
<HEAD>
<TITLE>My layout</TITLE>
</HEAD>
<BODY>
<div id=”AllWrap”>
<div id=”Header”>Header</div>
<div id=”MidWrap”>
<div id=”Content”>Content</div>
<div id=”Sidebar”>Sidebar</div>
</div>
<div id=”Footer”>Footer</div>
</div>
</BODY>
</Html>
給讀者留一個問題,請有能力的朋友在留言中給出實現效果圖樣式的CSS代碼。有如下要求:
本篇正文完(答案將在留言中討論,下篇將講述如何用CSS實現最終布局與背景顯示)
以上內容涉及某些人的商業利益,出於某些原因大家都不善於把那些能轉化為利益的內容洩露出來,於是那些教程總是讓人感到不得其所。
我的一個客戶曾跟我說在他們的領域(PR),大家不會免費把任何有價值的東西告訴客戶,或是大眾。其實在任何領域都是一樣的,大部分人寧願讓他的知識在腦中腐朽,也不會透露出半點來。
我知道的東西不多,但碰巧正是我的讀者所渴求的。所以,我決定把這些對於我最有價值的知識寫出來,即使你們當中會有一些成為我競爭的對手。換一個角度,如果能成為合作伙伴,那是最好不過了。如果本教程沒有讓你的失望,還請繼續支持。
致歉:要對我的讀者說聲抱歉,這篇教程整整晚了10天。如果一兩個星期更新不了一篇post,就有放那80個Readers鴿子的感覺,用一部分乖學生的話講就是和逃了一整天課一樣,頗感沉重。推遲的一個重要原因是因為我在:
Moving to Ubuntu: