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

前言： 佈局是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所包含的內容居中

1 2 3 4

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

1 2 3 4 5 6 7 8

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佈局完成簡單的工做。

關於佈局的最佳資源

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

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設備兼容

你能夠經過這裏查看樣例 Liquid three column layout, Left aligned, set width 和 Liquid insanity. (譯者注：這裏的連接和上面重複了，哎，原文的錯誤吧)

22-CSS模板和樣例

你能夠經過這裏查看這些樣例 3 columns fixed centered, fixed Box totallycentered and 3 columns, alldynamic

23-IM 佈局- IM 佈局是一種簡單地的CSS佈局系統，IM佈局提供了全A級的瀏覽器的支持。

你能夠經過這裏查看這些樣例: The Holy Grail 3 Column Layout, The Classic Blog Layout 和 The Multi Column Layout.

24-CSSplay - CSS佈局列表

你能夠經過這裏查看這些樣例:Cross browser FIXED, Three columns and CSS Frame – The Holy Grill.

25-Layoutgala - 基於一樣的的標記l獲得最大數量的不一樣的佈局方式。沒有CCS hack，沒有CSS workaround ，良好的瀏覽器兼容性。40種不一樣佈局。

你能夠經過這裏查看這些樣例:Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths (吐槽：沒有等高，很差看).

26-Glish- 許多有用的跨瀏覽器佈局技術

你能夠經過這裏查看這些樣例: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid

27-Thenoodleincident- CSS 從簡單的單盒到3盒並增長一個頂部條，全部都是變寬。

28-The Layout Reservoir- 不少有用的CSS佈局技術

你能夠經過這裏查看這些樣例: 2 columns – left menu, 3 columns – flanking menus和 Auto-width Margins.

29-The only CSS layout you need- 在這篇文章中將會爲你展示10個基於同一的HTML的不一樣的的佈局。

你能夠經過這裏查看這些樣例: Three column CSS layout – left and right menu, Two column CSS layout – top and left menu 和 Three column CSS fluid layout: 100% width

30-另外一個多欄佈局-是一個建立當代流行的變寬的浮動佈局的XHTML/CSS框架。這是一個多功能實用的佈局。

點擊這裏下載.

31-Liquid Designs- 使用XHTML和CSS的變寬設計庫。

最佳實踐

若是你須要尋找一些佈局靈感，你能夠從下面的網站連接中找到。這些站點演示了CSS佈局如何應用於不一樣類型的網站。查看這些網站是如何分紅2欄或3欄，或混合寬欄和窄欄佈局。

32-Helldesign

33-Silverbackapp

34-OS communications informatiques

35-Rockatee

36-Darrenhoyt

37-Makebetterwebsites

38-Elitetheme

39-Studio7designs

40-Brightcreative

(全文完)