模塊的主體是由列表組成的，而列表裡則包含數據塊。
按我的理解，頁面上的信息其實就是不同類型的列表。我們應將典型的列表方式提取出來，放在公用樣式裡（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=“”>±¬Á&IUML;</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//當前元素