接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海裡有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因為web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統**方法實現的布局，用div也可以實現。技術有乙個成熟的過程，把div看成和table一樣的工具，如何運用就看你的想象力了。
注：在實際應用過程中，div在有些地方的確不如**方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價值判斷。好，不羅嗦了，我們開始：
1.確定布局
。用div的話，我考慮使用三列來布局,成為這樣。
2.定義body樣式
先定義整個頁面的body的樣式,**如下：
body
以上**的作用在上一天的教程有詳細說明，大家應該一看就明白。定義了邊框邊距為0；背景顏色為#fefefe，背景為bg_logo.gif，位於頁面右下角，不重複；定義了字型尺寸為12px；字型顏色為#666;行高150%。
3.定義主要的div
初次使用css布局，我決定採用固定寬度的三列布局(比自適應解析度的設計簡單,hoho，別說我偷懶，先實現簡單的，增加點信心嘛！)。分別定義左中右的寬度為200:300:280，在css中如下定義:
/*定義頁面左列樣式*/
#left
/*定義頁面中列樣式*/
#middle
/*定義頁面右列樣式*/
#right
注意：定義中列和右列div我都採用了position: absolute;，然後分別定義了left:200px;top:0px;和left:500px;top:0px;這是這個布局的關鍵，我採用了層的絕對定位。定義中間列距離頁面左邊框200px，距離頂部0px；定義右列距離頁面左邊框500px，距離頂部0px；。
這時候整個頁面的**是：
頁面左列
頁面中列
頁面右列
這時候頁面的效果僅僅可以看到三個並列的灰色矩形，和乙個背景圖。但是我希望高度是滿屏的，怎麼辦呢？
4.100%自適應高度?
為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設定"height:100%;"，但發現完全沒有預想的自適應高度效果。經過一番嘗試後，我只好給每個div乙個絕對高度:"height:1000px;"，並且隨著內容的增加，需要不斷修正這個值。難道沒有辦法自適應高度了嗎？隨著自己學習的深入，發現乙個變通的解決辦法，實際上根本不需要設定100%，我們已經被table思維禁錮太深了。
CSS 後台布局例項
下面的例子是乙個簡單的布局 最上面是header，左邊是乙個logo 老男孩 右邊是使用者的登入資訊 中間一大塊是內容，內容左側是選單，右側是具體的內容 如下 body的margin為0，確保邊上全部填滿 absolute 確保位置不變 注意如果他的父級標籤有relative，他相對於這個父級標籤的...
CSS例項 CSS實現的等高網頁布局
為了讓網頁更美觀 協調，有的時候需要用到左右等到布局，傳統的等高布局是用 j ascript 實現的，現在來看看 silence 發明的真正的 css 實現的等高布局。為了讓網頁更美觀 協調，有的時候需要用到左右等到布局，傳統的等高布局是用 j ascript 實現的，現在來看看 silence 發...
CSS3 flexbox彈性布局例項
我認為當flexbox支援所有的瀏覽器時，由於它比浮動布局更加的簡單和強大性，它將徹底的改變我們的css布局方式。例如我們可以很容易的寫出乙個元素在未知比例下的居中對齊布局。當然css3新增的其它屬性，例如grid也可以給前端開發帶來更多的布局方式。下面給出一些例子來證明為什麼web開發者應該使用f...