原文：
從本篇開始講述如何用css實現網頁的布局，即如何用css控制網頁內各個元素的顯示位置。如果你是乙個初學者，很可能覺得www.cppcns.com做乙個網頁的第一步就是布局。其實不然，css網頁的設計過程可以參考分為以下幾步：
平面設計—>頁面切割—>布局—>細節控制
平面設計是乙個網頁的精髓所在，讀者直接面對的介面，在本站以後的文章中會涉及此方面內容。也許你會認為在腦子裡形成乙個**的大概印象就可以了，那麼這種想法直接就給你貼上業餘的標籤。推薦工具：photoshop；
頁面切割其實可以劃分到布局裡，因為你的頁面切割方式直接影響了布局方式，也體現了你是屬於**布局陣營還是css布局陣營。它是布局(前)的關鍵步驟。將在本章重點講述。推薦工具：photoshop；
如果把布局說簡單點，就先得把你的網頁簡單化。簡單到把你的**分為header，content，sidebar，footer四個部分。
細節控制，將header，content，sidebar，footer的表現細節化。
本章將針對頁面切割講述一些jorux的私人觀點與技術。
首先，我們要有乙個被切割的物件，這裡以jorux.com的原始photoshop平面設計圖為例。如下（fig.01）：
點選檢視大圖
如果使用**布局的話，你可能就想到在photoshop裡把頁面切割為無數個固定寬高的格仔。但用css布局的話，你首先要明確的以下幾點是：
www.cppcns.com
你是要橫著切，還是要豎著切；
第一次切割，只需要把網頁中的背景切割出來(因為背景是在css裡宣告的)；
切的的要盡量小，然後讓css去做更多的事情；
設計比較複雜的部分，可以不分割，從而減少css編碼的難度；
讀者應該根據自己的能力，找出哪些效果css可以輕鬆實現，而哪些效果用更加程式設計客棧簡單而且size不大，仔細在3.4之間權衡利弊；
現在我們來看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檔案中
的，而非背景，為了減少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)的效果圖，需要做以下幾步：
我們首先把header，content，sidebar，footer歸為乙個div，id=「allwrap」；用其實現向左浮動；
接著把header作為乙個div，id=「header」；
把content和sidebar劃分在乙個div，id=「midwrap」；然後在其內繼續劃分為兩個div，id分別為content和sidebar；
最後把footer作為乙個div，id=「footer」；
最終得到html**為：
-//w3c//dtd html 4.0 transitional//en」>
my layout
header
content
sidebar
footer
給讀者留乙個問題，請有能力的朋友在留言中給出實現效果圖樣式的css**。有如下要求：
向左浮動；
allwrap寬為760px；content寬為560px，高400px；sidebar寬為200px，高400px；footer高為80px，寬760px；
在800600，1024768，或是寬屏顯示器都能正常顯示；
在ie6/7, opera, firefox均能顯示正常；
本篇正文完(答案將在留言中討論，下篇將講述如何用css實現最終布局與背景顯示)
以上內容涉及某些人的商業利益，出於某些原因大家都不善於把那些能轉化為利益的內容洩露出來，於是那些教程總是讓人感到不得其所。
我的乙個客戶曾跟我說在他們的領域(pr)，大家不會免費把任何有價值的東西告訴客戶，或是大眾。其實在任何領域都是一樣的，大部分人寧願讓他的知識在腦中腐朽，也不會透露出半點來。
我知道的東西不多，但碰巧正是我的讀者所渴求的。所以，我決定把這些對於我最有價值的知識寫出來，即使你們當中會有一些成為我競爭的對手。換乙個角度，如果能成為合作夥伴，那是最好不過了。如果本教程沒有讓你的失望，還請繼續支援。
致歉：要對我的讀者說聲抱歉，這篇教程整整晚了10天。如果一兩個星期更新不了一篇post，就有放那80個readers鴿子的感覺，用一部分乖學生的話講就是和逃了一整天課一樣，頗感沉重。推遲的乙個重要原因是因為我在：
moving to ubuntu：
ubuntu是乙個讓我割捨不下的免費系統，自從發現了hacked的iso免安裝方法後，它的優勢是如此明顯：免費，無盜版，免安裝，能讀取/寫入windows分割槽的檔案，無需分割槽格式化，1分鐘重灌，沒安驅ufsgxgfln動就識別了我的asus laptop上除modem以外的所有硬體。
它有乙個優秀的替代editplus的程式設計工具–bluefish，我管它叫胖嘴藍魚。編**時有條胖魚陪著，氣氛能緩和很多。
老實說ubuntu是個嚴重依賴網路的系統，如果你的上網條件不佳，建議不要嘗試。但一旦上了網，它就不得了了，以下這個資訊就很cool：
CSS入門教程
css是 cascading style sheets 的簡稱，中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...
CSS入門教程
css是 cascading style sheets 的簡稱，中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...
CSS入門教程
一說學程式設計,大家都下意識覺得要 吃苦 熬夜 哪有那麼複雜,一定是你看錯了教程.這是我剛錄的教程,挑乙個陽光的午後,關掉手機,用6個小時,看看十八哥如何把乙個公司的保安教會html的.001.了解html 002.開發環境準備 003.認識html的組成結構 004.網頁布局之切切豆腐 005.c...