DIV CSS 佈局教程網

做前端也有幾年時間了，不敢說能把他看地多透，但是多多少少還是有些自己的東西。下面以 Tudou.com 的首頁為例，總結總結。

就制作而言，我將一張頁面分為四層：框架、布局、模塊、列表和數據塊。

一、框架

頁面的框架基本上都是：“頭”、“主體”、“尾”。但是對於一些頁面如Tudou.com，由於布局的需要，還應在“頭”的下面還要加個“菜單”。

二、布局（以下用#ID表示頁面元素）

#Head和#Foot裡的就不說了，具體查看演示頁面源碼。

布局說的是將#Main裡的內容分成幾大塊。我們看Tudou.com，#Main裡典型的左右結構，我們用#Layout_1，#Layout_2表示。如圖

三、模塊

布局#Layout_1，#Layout_2裡的塊就是模塊了，

按我的理解，模塊至少要有一個ID，Class則要視頁面設計，給需要重用的加上。

關於模塊的ID名稱，要取個有意義的名字，當然偷懶的可以用#Col_1，#Col_2，。。。

模塊的Class名稱用.cols_1，.cols_2，。。。

模塊內部的如下圖：

做前端也有幾年時間了，不敢說能把他看地多透，但是多多少少還是有些自己的東西。下面以 Tudou.com 的首頁為例，總結總結。

就制作而言，我將一張頁面分為四層：框架、布局、模塊、列表和數據塊。

一、框架

頁面的框架基本上都是：“頭”、“主體”、“尾”。但是對於一些頁面如Tudou.com，由於布局的需要，還應在“頭”的下面還要加個“菜單”。

二、布局（以下用#ID表示頁面元素）

#Head和#Foot裡的就不說了，具體查看演示頁面源碼。

布局說的是將#Main裡的內容分成幾大塊。我們看Tudou.com，#Main裡典型的左右結構，我們用#Layout_1，#Layout_2表示。如圖

三、模塊

布局#Layout_1，#Layout_2裡的塊就是模塊了，

按我的理解，模塊至少要有一個ID，Class則要視頁面設計，給需要重用的加上。

關於模塊的ID名稱，要取個有意義的名字，當然偷懶的可以用#Col_1，#Col_2，。。。

模塊的Class名稱用.cols_1，.cols_2，。。。

模塊內部的如下圖

四、列表和數據塊

模塊的主體是由列表組成的，而列表裡則包含數據塊。

按我的理解，頁面上的信息其實就是不同類型的列表。我們應將典型的列表方式提取出來，放在公用樣式裡（public.css）。

以Tudou.com為例，需要定義到public.css裡的列表至少要有以下三種：

1. .list-v 垂直列表方式 (圖片和文字成垂直排列)
2. .list-h 水平列表方式 (圖片和文字成水平排列)
3. .list-t 文字列表方式

數據塊其實是微格式的一個變相應用，給不同的數據元素定義固定的結構。

Tudou.com 需要定義的數據塊有：

1. .mVideo (視頻)
2. .mList (豆單)
3. .mUser (用戶)

比如 .mVideo 應該是這樣的：

<div class=“mVideo”>
    <div class=“p”><a href=“” title=“”><img src=“” alt=“阿聯又掛彩 有望首發戰公牛” />