中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

四、列表和數(shù)據(jù)塊

模塊的主體是由列表組成的，而列表里則包含數(shù)據(jù)塊。

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

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

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

數(shù)據(jù)塊其實(shí)是微格式的一個(gè)變相應(yīng)用，給不同的數(shù)據(jù)元素定義固定的結(jié)構(gòu)。

Tudou.com 需要定義的數(shù)據(jù)塊有：

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

比如 .mVideo 應(yīng)該是這樣的：

<div class=“mVideo”>
    <div class=“p”><a href=“” title=“”><img src=“” alt=“阿聯(lián)又掛彩 有望首發(fā)戰(zhàn)公�！� /></a></div>
    <div class=“d”>
        <div class=“d_name”><a href=“” title=“”>阿聯(lián)又掛彩 有望首發(fā)戰(zhàn)公牛</a></div>
        <div class=“d_user”><a href=“” title=“”>阿聯(lián)又掛彩 有望首發(fā)戰(zhàn)公牛</a></div>
        <div class=“d_length”>06:88</div>
        <div class=“d_time”>發(fā)布時(shí)間：<span>2007-10-08 14:31</span></div>
        <div class=“d_intro”>阿聯(lián)又掛彩阿聯(lián)又掛彩阿聯(lián)又掛彩</div>
        <div class=“d_honor”>榮譽(yù)：<span><img src=“” alt=“&#199;&#191;” /></span></div>
        <div class=“d_view”>人氣：<span>222</span></div>
        <div class=“d_comment”>評(píng)論：<span>323</span></div>
        <div class=“d_favorite”>收藏：<span>32</span></div>
        <div class=“d_type”>類型：<span><a href=“” title=“”>&#181;&#231;&#211;°</a><a href=“” title=“”>&#181;&#231;&#202;&#211;&#190;&#231;</a></span></div>
        <div class=“d_tag”>標(biāo)簽：<span><a href=“” title=“”>Twins</a><a href=“” title=“”>&#209;&#221;&#179;&#170;&#187;á</a></span></div>
        <div class=“d_subject”>專題：<span><a href=“” title=“”>±&#172;&#193;&#207;</a></span></div>
    </div>
</div>

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

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

Class

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

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2831611-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2008/5546.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 我的頁面制作方法 [1] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。