二、格局（以次用#ID示意頁面元素）

頁面的框架根本上都是：“頭”、“主體”、“尾”。如圖
#Head和#Foot里的就沒有說了，詳細(xì)檢查演示頁面源碼。。然而關(guān)于一 些頁面如Tudou.com，因?yàn)楦窬值男枨?，還應(yīng)正在“頭”的上面還要加個(gè)“菜單”。。

   
       
            3. .list-t 文字列表形式
            2. .list-h 程度列表形式 (圖片和文字成程度陳列)
            1. .list-v 垂直列表形式 (圖片和文字成垂直陳列)
       
   

以Tudou.com為 例，需求界說到public.css里的列表至多要有以次三種：
按我的了解， 頁面上的消息實(shí)在就是沒有同類型的列表。
一、框架
    做前者也有多少年工夫了，沒有敢說能把他看地多透，然而多多少少還是有些本人的貨色。
模塊的主體是由列表組成的，而列表里則蘊(yùn)含數(shù)據(jù)塊。咱們應(yīng)將垂范的列表形式提取進(jìn)去，放正在專用款式里（public.css）。

。模塊的Class稱號(hào)用.cols_1，.cols_2，。

   
       
            </div>
            </div>
            <div class=“d_subject”>專題：<span><a href=“” title=“”>±¬ÁÏ</a></span></div>
            <div class=“d_tag”>標(biāo)簽：<span><a href=“” title=“”>Twins</a><a href=“” title=“”>Ñݳª»á</a></span></div>
            <div class=“d_type”>類型：<span><a href=“” title=“”>µçÓ°</a><a href=“” title=“”>µçÊÓ¾ç</a></span></div>
            <div class=“d_favorite”>珍藏：<span>32</span></div>
            <div class=“d_comment”>評(píng)說：<span>323</span></div>
            <div class=“d_view”>人氣：<span>222</span></div>
            <div class=“d_honor”>聲譽(yù)：<span><img src=“” alt=“Ç¿” /></span></div>
            <div class=“d_intro”>阿聯(lián)又掛花阿聯(lián)又掛花阿聯(lián)又掛花</div>
            <div class=“d_time”>公布工夫：<span>2007-10-08 14:31</span></div>
            <div class=“d_length”>06:88</div>
            <div class=“d_user”><a href=“” title=“”>阿聯(lián)又掛花 無望首演戰(zhàn)牯牛</a></div>
            <div class=“d_name”><a href=“” title=“”>阿聯(lián)又掛花 無望首演戰(zhàn)牯牛</a></div>
            <div class=“d”>
            <div class=“p”><a href=“” title=“”><img src=“” alt=“阿聯(lián)又掛花 無望首演戰(zhàn)牯牛” /></a></div>
            <div class=“mVideo”>
       
   

比方 .mVideo 該當(dāng)是那樣的：

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

Tudou.com 需求界說的數(shù)據(jù)塊有：
數(shù)據(jù)塊實(shí)在是微體例的一度變相使用， 給沒有同的數(shù)據(jù)元素界說流動(dòng)的構(gòu)造。
四、列表和數(shù)據(jù)塊

模塊外部的如次圖

格局#Layout_1，#Layout_2里的塊就是模塊了，按我的理 解，模塊至多要有一度ID，Class則要視頁面設(shè)想，給需求重用的加上。就制造而言，我將一張頁面分成四層：框架、格局、模塊、列表和數(shù)據(jù)塊。。咱們看 Tudou.com，#Main里垂范的內(nèi)外構(gòu)造，咱們用#Layout_1，#Layout_2示意。(義務(wù)編者：帝位庫)

   
       
            12. .current // 以后元素
            11. .*_fix // *元素的布條元素
            10. .m_*(.mVideo, .mComment, .mUser, .mSubject, …) // 數(shù)據(jù)塊元素
            9. .handle // 操作元素
            8. .p, .d, .d_*, .h // 數(shù)據(jù)塊內(nèi)元素，辨別為圖片、細(xì)致、細(xì)致內(nèi)元素、操作
            7. .b // 海報(bào)位
            6. .s // 特別元素，假如一度元素絕對(duì)于于小弟節(jié)點(diǎn)特別，則用之
            5. .s1, .s2, … // 用來子單元塊需各自界說款式的元素，如菜單、橫排榜等
            4. .m // 更多，可蔓延至“相對(duì)于定坐落右上方”的元素
            3. .list_*(.list_v, .list_h, .list-t, .list_top, …) // 列表元素，詳見“列表”
            2. .meat // 模塊主體元素
            1. .txt, .btn, .label_checkbox, .label_input, .handle // 表單內(nèi)元素
       
   

Class

   
       
            8. #Plugin // Banner用
            7. #B* // 海報(bào)位，與class=”b”聯(lián)合運(yùn)用
            6. #Links, #CopyRight // Foot內(nèi)元素
            5. #Layout_*, #Group_*, #Col_* // Main內(nèi)元素
            4. #Logo, #Toolbar, #Search, #Menu // Head內(nèi)元素
            3. #Message // 零碎信息用
            2. #Head, #Main, #Foot //格局用ID
            1. #B-* // Body用
       
   

ID
最初，附上要害字表，就是一些用來公共界說的ID和Class稱號(hào)。對(duì)于于模塊的ID稱號(hào)，要取個(gè)成心義的名字，千萬偷生的能夠 用#Col_1，#Col_2，。。
三、模塊

格局說的是將#Main里的形式分紅多少大塊。