你對頁面制作方法是否了解，這里Div CSS實例教程帶你一起來學習，相信通過本文的學習你對頁面制作的方法一定會有明確的認識。

Div CSS實例教程：分享非常不錯的頁面制作方法

做前端也有幾年時間了，不敢說能把他看地多透，但是多多少少還是有些自己的東西。就制作而言，我將一張頁面分為四層：框架、布局、模塊、列表和數據塊。

　　一、Div CSS實例之框架

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

　　二、Div CSS實例之布局（以下用#ID表示頁面元素）

　　#Head和#Foot里的就不說了，具體查看演示頁面源碼。
　　布局說的是將#Main里的內容分成幾大塊。我們看Tudou.com，#Main里典型的左右結構，我們用#Layout_1，#Layout_2表示。如圖

#p#
　　三、Div CSS實例之模塊

　　布局#Layout_1，#Layout_2里的塊就是模塊了，
　　按我的理解，模塊至少要有一個ID，Class則要視頁面設計，給需要重用的加上。
　　關于模塊的ID名稱，要取個有意義的名字，當然偷懶的可以用#Col_1，#Col_2，。。。
　　模塊的Class名稱用.cols_1，.cols_2，。。。

　　模塊內部的如下圖

#p#
　　四、Div CSS實例之列表和數據塊

　　模塊的主體是由列表組成的，而列表里則包含數據塊。
　　按我的理解，頁面上的信息其實就是不同類型的列表。我們應將典型的列表方式提取出來，放在公用樣式里（public.css）。
　　以Tudou.com為例，需要定義到public.css里的列表至少要有以下三種：

　　1..list-v垂直列表方式(圖片和文字成垂直排列)

       2..list-h水平列表方式(圖片和文字成水平排列)

       3..list-t文字列表方式

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

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

　　1..mVideo(視頻)
　　2..mList(豆單)
　　3..mUser(用戶)
　　比如.mVideo應該是這樣的：

ExampleSourceCode
 

<divclassdivclass=“mVideo”> 
<divclassdivclass=“p”><ahrefahref=“”title=“”><imgsrcimgsrc=“”alt=“阿聯又掛彩有望首發戰公牛”/></a></div> 
<divclassdivclass=“d”> 
<divclassdivclass=“d_name”><ahrefahref=“”title=“”>阿聯又掛彩有望首發戰公牛</a></div> 
<divclassdivclass=“d_user”><ahrefahref=“”title=“”>阿聯又掛彩有望首發戰公牛</a></div> 
<divclassdivclass=“d_length”>06:88</div> 
<divclassdivclass=“d_time”>發布時間：<span>2007-10-0814:31</span></div> 
<divclassdivclass=“d_intro”>阿聯又掛彩阿聯又掛彩阿聯又掛彩</div> 
<divclassdivclass=“d_honor”>榮譽：<span><imgsrcimgsrc=“”alt=“Ç¿”/></span></div> 
<divclassdivclass=“d_view”>人氣：<span>222</span></div> 
<divclassdivclass=“d_comment”>評論：<span>323</span></div> 
<divclassdivclass=“d_favorite”>收藏：<span>32</span></div> 
<divclassdivclass=“d_type”>類型：<span><ahrefahref=“”title=“”>µçÓ°</a><ahrefahref=“”title=“”>µçÊÓ¾ç</a></span></div> 
<divclassdivclass=“d_tag”>標簽：<span><ahrefahref=“”title=“”>Twins</a><ahrefahref=“”title=“”>Ñݳª»á</a></span></div> 
<divclassdivclass=“d_subject”>專題：<span><ahrefahref=“”title=“”>±¬ÁÏ</a></span></div> 
</div> 
</div> 

　　最后，附上關鍵字表，就是一些用于公共定義的ID和Class名稱。

　　ID

ExampleSourceCode　　

   1.#B-*//Body用  
　　2.#Head,#Main,#Foot//布局用ID  
　　3.#Message//系統消息用  
　　4.#Logo,#Toolbar,#Search,#Menu//Head內元素  
　　5.#Layout_*,#Group_*,#Col_*//Main內元素  
　　6.#Links,#CopyRight//Foot內元素  
　　7.#B*//廣告位，與class=”b”結合使用  
　　8.#Plugin//Banner用  

　　Class

ExampleSourceCode　　

1..txt,.btn,.label_checkbox,.label_input,.handle//表單內元素  
　　2..meat//模塊主體元素  
　　3..list_*(.list_v,.list_h,.list-t,.list_top,…)//列表元素，詳見“列表”  
　　4..m//更多，可延伸至“絕對定位于右上角”的元素  
　　5..s1,.s2,…//用于子單元塊需各自定義樣式的元素，如菜單、排行榜等  
　　6..s//特殊元素，如果一個元素相對于兄弟節點特殊，則用之  
　　7..b//廣告位  
　　8..p,.d,.d_*,.h//數據塊內元素，分別為圖片、詳細、詳細內元素、操作  
　　9..handle//操作元素  
　　10..m_*(.mVideo,.mComment,.mUser,.mSubject,…)//數據塊元素  
　　11..*_fix//*元素的補丁元素  
　　12..current//當前元素 

【編輯推薦】

1. DIV CSS的XHTML代碼結構淺談
2. 解析DIV布局之四大屬性用法
3. Html中DIV和Span的區別揭秘
4. 使用Div CSS構架的三大好處
5. DIV CSS居中常見方法解析