CSS佈局:40個教程、技巧、例子和最佳實踐(1)
AD：
基於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佈局完成簡單的工作。
