CSS布局:40個教程、技巧、例子和最佳實踐

作者：_錕_ 2012-03-19 09:55:38

前言：布局是WEB開發一個重要的課題，進入XHTML/CSS后，使用TABLE布局的方式逐漸淡出，CSS布局以眾多優點成為主流，本文將介紹40個基于CSS的web布局的資源和教程。文章的出處在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本經典的CSS書籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，據我所知，第二版在中國沒有翻譯出版。你可以從這里下載英文版（不過需要注冊個用戶名）

基于CSS的布局能提供更靈活布局方式和更強的用戶視覺體驗。一些重要技巧和關鍵點可以幫助初學者理解CSS布局的基礎和本質。這也是本文成文的原因 ——找到那些***的布局，完全靈活的，等高欄和工作***的布局。

因此下面這個列表就是我們整理了網絡上關于基于CSS布局的一些技巧，教程和***實踐的列表。

當然你也可能對下面這些和CSS相關的主題有興趣：

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

CSS 布局教程

1-使用CSS完成三欄固定布局結構- 這篇文章解釋了如何實現一個基于的HTML/CSS來設計一個簡單的帶有基本要素（頂部的logo條，導航條，文本區，定義分類的中部欄，右邊側欄插入google的120X600的廣告區）的固定三欄頁面布局。

2-使用CSS設計頁面布局- 如何使用CSS文件來為你的站點設計頁面布局。

3-如何創建一個水平布局的站點- 創建不同于常規的水平布局的站點技術（譯者注：水平布局，客戶體驗也就仁者見仁了）

例子查看這里 |下載

4-超級簡單的兩欄布局- 創建不同于常規的水平布局的站點技術（譯者注：這里是原作者筆誤吧和上面的內容一樣）.

例子查看這里下載

5-簡單兩欄CSS布局- 這是一個創建簡單兩欄布局的教程。這種布局包含了一個標題區，一個水平導航條，主內容區，邊側欄，和頁腳區。并且這個布局是水平居中的。

例子查看這里

6-圣杯布局(The holy grail layout) – 3欄布局會有一些問題，這篇文章討論了一種三欄布局——兩欄固定寬度邊側欄加上一欄變寬中欄布局，保證了頁面的良好結構和清晰。

例子查看這里

7-CSS居中101- 如何使用CSS完成居中一個固定寬度的布局

使用CSS，通過下面兩條規則完成對id為container的DIV所包含的內容居中

<body> 
 <div id="container"> ...entire layout goes here... 
</div> 
</body>

body { 
    text-align: center; 
} 
#container { 
    margin: 0 auto; 
    width: xxxpx; 
    text-align: left; 
}

8-從頭創建CSS布局- 這個指南通過創建一個全功能的 CSS布局來一步步教你入門CSS布局。

9-非主流！多欄布局- 多欄布局，等高欄（每一列的高度都相等），固定或變寬中央區，簡潔標記，CSS 。(譯者注：原文作者的圖配的和上圖一樣)

例子查看這里

10- 創建天下***的CSS布局- 高靈活性布局,等高欄，跨欄垂直擺放元素。本文告訴你通過何等手段完成這些目標，并使用它們創建天下***的CSS布局（譯者注:原文是One True Layout ，不知道怎么翻譯，就天下***吧。）

查看這里

11-從PSD到HTML，手把手完成WEB設計-從Photoshop到完整HTML，全過程手把手教會你。

例子查看這里 | 下載

12- 5個XHTML/CSS技巧 – 5個CSS技巧幫助你完成從基于表格的布局到基于CSS的布局。

13-設計一個基于CSS的模板 – 這是一個教你創建基于CSS的模板頁的基礎教程。這個教程由下面幾個部分構成：***部分覆蓋了在Photoshop CS*中的創建導航條按鈕，第二部分：創建背景接下來的清單是標題和頁面布局，***的部分在XHTML和CSS中實現。

下載

14-使用CSS布局跳出常規布局- 如果你理解了基于表格布局的工作方式，你能通過合并或拆分表格創建你隨心所欲的布局。就這個目標（同時支持靈活性和可維護性），CSS能夠提供比基于表格更多地東西。Jina Bolton的教程解釋如何達到這個目標。

15-高級CSS教程:手把手- 這個教程的***目標創建一個CSS布局，這個CSS布局精確地重組了原有使用table的WebReference.com的布局。

16-了解CSS布局的6個關鍵要素-本文講述了6件基于CSS布局需要了解的事情：盒模型(Box Model)，浮動欄(Floated Columns) （譯者注：float是WEB布局最重要的一個屬性了）。使用Em來設置尺寸（Sizing Using Ems），圖片替換（Image Replacement）,浮動導航和Sprintes。

17-你會犯這些常見的博客布局錯誤嗎？-討論4個博客布局中常見而且易修復的錯誤。

18-頁面布局-CSS頁面布局中的浮動元素和定位元素實踐指導。

你可以查看這些例子：Absolute Position within a relative box two floated boxes和 using a border to provide the background for a column

19-Site in an Hour- 使用復雜CCS布局完成簡單的工作。

#p#

關于布局的***資源

下面的大多數這些資源不需要許可就能直接使用，然而，其中的一些需要先發郵件確認一下是否可以使用這些資源。因此，在使用之前***先檢查資源的版權信息。

20-簡單CSS頁面布局- 這里有一套2欄和3欄的CSS布局。

你可以通過這里查看這些樣例 Liquid three column layout, Left aligned, set width and Liquid insanity.

21-***的三欄變寬布局（百分比定寬度）The Perfect 3 Column Liquid Layout (Percentage widths)- 沒有CSS hack（譯者注：不知道怎么翻譯，點擊這里查看解釋）. 良好地收索引擎優化.無圖. 無Javascript. 跨瀏覽器和IPHONE設備兼容