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

fmms 12年前發布 | 30K 次閱讀 CCS

前言： 布局是 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 的廣告區）的固定三欄頁面布局。

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

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

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

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

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

例子查看這里下載

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

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

例子查看這里下載

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

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

例子查看這里

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

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

例子查看這里

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

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

　　<body>

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

　　</div>

　　</body>

　　<pre>body {

　　    text-align: center;

　　}

　　#container {

　　    margin: 0 auto;

　　    width: xxxpx;

　　    text-align: left;

　　}

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

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

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

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

例子查看這里

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

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

查看這里

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

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

例子查看這里下載

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

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

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

下載

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

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

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

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

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

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

關于布局的最佳資源

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

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

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

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

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

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