CSS布局：40個教程、技巧、例子和最佳實踐
前言： 布局是WEB開發(fā)一個重要的課題，進入XHTML/CSS后，使用TABLE布局的方式逐漸淡出，CSS布局以眾多優(yōu)點成為主流，本文將介紹40個基于CSS的web布局的資源和教程。文章的出處在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本經(jīng)典的CSS書籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，據(jù)我所知，第二版在中國沒有翻譯出版。你可以從這里下載英文版（不過需要注冊個用戶名）
正文
基于CSS的布局能提供更靈活布局方式和更強的用戶視覺體驗。一些重要技巧和關(guān)鍵點可以幫助初學(xué)者理解CSS布局的基礎(chǔ)和本質(zhì)。這也是本文成文的原因 ——找到那些完美的布局，完全靈活的，等高欄和工作完美的布局。
因此下面這個列表就是我們整理了網(wǎng)絡(luò)上關(guān)于基于CSS布局的一些技巧，教程和最佳實踐的列表。
當(dāng)然你也可能對下面這些和CSS相關(guān)的主題有興趣：
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完成三欄固定布局結(jié)構(gòu)- 這篇文章解釋了如何實現(xiàn)一個基于的HTML/CSS來設(shè)計一個簡單的帶有基本要素（頂部的logo條，導(dǎo)航條，文本區(qū)，定義分類的中部欄，右邊側(cè)欄插入google的120X600的廣告區(qū)）的固定三欄頁面布局。
2、使用CSS設(shè)計頁面布局- 如何使用CSS文件來為你的站點設(shè)計頁面布局。
3、如何創(chuàng)建一個水平布局的站點- 創(chuàng)建不同于常規(guī)的水平布局的站點技術(shù)（譯者注：水平布局，客戶體驗也就仁者見仁了）
4、超級簡單的兩欄布局- 創(chuàng)建不同于常規(guī)的水平布局的站點技術(shù)（譯者注：這里是原作者筆誤吧和上面的內(nèi)容一樣）.
5、簡單兩欄CSS布局- 這是一個創(chuàng)建簡單兩欄布局的教程。這種布局包含了一個標題區(qū)，一個水平導(dǎo)航條，主內(nèi)容區(qū)，邊側(cè)欄，和頁腳區(qū)。并且這個布局是水平居中的。
例子查看這里
6、圣杯布局(The holy grail layout) – 3欄布局會有一些問題 ，這篇文章討論了一種三欄布局——兩欄固定寬度邊側(cè)欄加上一欄變寬中欄布局，保證了頁面的良好結(jié)構(gòu)和清晰。
例子查看這里
7、CSS居中101- 如何使用CSS完成居中一個固定寬度的布局
使用CSS，通過下面兩條規(guī)則完成對id為container的DIV所包含的內(nèi)容居中
|
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、從頭創(chuàng)建CSS布局- 這個指南通過創(chuàng)建一個全功能的 CSS布局來一步步教你入門CSS布局。
9、非主流！多欄布局- 多欄布局，等高欄（每一列的高度都相等），固定或變寬中央?yún)^(qū)，簡潔標記，CSS 。(譯者注：原文作者的圖配的和上圖一樣)
例子查看這里
10、創(chuàng)建天下無雙的CSS布局- 高靈活性布局,等高欄，跨欄垂直擺放元素。本文告訴你通過何等手段完成這些目標，并使用它們創(chuàng)建天下無雙的CSS布局（譯者注:原文是One True Layout ，不知道怎么翻譯，就天下無雙吧。）
11、從PSD到HTML，手把手完成WEB設(shè)計-從Photoshop到完整HTML，全過程手把手教會你。
12、5個XHTML/CSS技巧 – 5個CSS技巧幫助你完成從基于表格的布局到基于CSS的布局。
13、設(shè)計一個基于CSS的模板 – 這是一個教你創(chuàng)建基于CSS的模板頁的基礎(chǔ)教程。這個教程由下面幾個部分構(gòu)成：第一部分覆蓋了在Photoshop CS*中的創(chuàng)建導(dǎo)航條按鈕，第二部分：創(chuàng)建背景接下來的清單是標題和頁面布局，最后的部分在XHTML和CSS中實現(xiàn)。
14、使用CSS布局跳出常規(guī)布局- 如果你理解了基于表格布局的工作方式，你能通過合并或拆分表格創(chuàng)建你隨心所欲的布局。就這個目標（同時支持靈活性和可維護性），CSS能夠提供比基于表格更多地東西。Jina Bolton的教程解釋如何達到這個目標。
15、高級CSS教程:手把手- 這個教程的終極目標創(chuàng)建一個CSS布局，這個CSS布局精確地重組了原有使用table的WebReference.com的布局。
16、了解CSS布局的6個關(guān)鍵要素- 本文講述了6件基于CSS布局需要了解的事情：盒模型(Box Model)，浮動欄(Floated Columns) （譯者注：float是WEB布局最重要的一個屬性了）。使用Em來設(shè)置尺寸（Sizing Using Ems），圖片替換（Image Replacement）,浮動導(dǎo)航和Sprintes。
17、你會犯這些常見的博客布局錯誤嗎？-討論4個博客布局中常見而且易修復(fù)的錯誤。
18、頁面布局-CSS頁面布局中的浮動元素和定位元素實踐指導(dǎo)。
你可以查看這些例子：Absolute Position within a relative box two floated boxes和 using a border to provide the background for a column
19、Site in an Hour- 使用復(fù)雜CCS布局完成簡單的工作。
#p#
關(guān)于布局的最佳資源
下面的大多數(shù)這些資源不需要許可就能直接使用，然而，其中的一些需要先發(fā)郵件確認一下是否可以使用這些資源。因此，在使用之前最好先檢查資源的版權(quán)信息。
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（譯者注：不知道怎么翻譯，點擊這里查看解釋）. 良好地收索引擎優(yōu)化.無圖. 無Javascript. 跨瀏覽器 和IPHONE設(shè)備兼容。
你可以通過這里查看樣例 Liquid three column layout, Left aligned, set width 和 Liquid insanity. (譯者注：這里的鏈接和上面重復(fù)了，哎，原文的錯誤吧)
22、CSS模板和樣例
你可以通過這里查看這些樣例 3 columns fixed centered, fixed Box totallycentered and 3 columns, alldynamic
23、IM 布局- IM 布局是一種簡單地的CSS布局系統(tǒng)，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得到最大數(shù)量的不同的布局方式。沒有CCS hack，沒有CSS workaround ，良好的瀏覽器兼容性。40種不同布局。
你可以通過這里查看這些樣例:Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths (吐槽：沒有等高，不好看).
26、Glish- 許多有用的跨瀏覽器布局技術(shù)
你可以通過這里查看這些樣例: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid
27、Thenoodleincident- CSS 從簡單的單盒到3盒并增加一個頂部條，所有都是變寬。
28、The Layout Reservoir- 很多有用的CSS布局技術(shù)
你可以通過這里查看這些樣例: 2 columns – left menu, 3 columns – flanking menus和 Auto-width Margins .
29、The only CSS layout you need- 在這篇文章中將會為你展現(xiàn)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、另一個多欄布局-是一個創(chuàng)建當(dāng)代流行的變寬的浮動布局的XHTML/CSS框架。這是一個多功能實用的布局。
點擊這里下載.
31、Liquid Designs- 使用XHTML和CSS的變寬設(shè)計庫。
#p#
最佳實踐
如果你需要尋找一些布局靈感，你可以從下面的網(wǎng)站鏈接中找到。這些站點演示了CSS布局如何應(yīng)用于不同類型的網(wǎng)站。查看這些網(wǎng)站是如何分成2欄或3欄，或混合寬欄和窄欄布局。
32、Helldesign
34、OS communications informatiques
35、Rockatee
36、Darrenhoyt
38、Elitetheme
原文鏈接：http://coolshell.cn/articles/6840.html
【編輯推薦】
