二、格局（以次用#ID示意页面元素）
页面的框架根本上都是：“头”、“主体”、“尾”。如图
#Head和#Foot里的就没有说了，详细检查演示页面源码。。然而关于一 些页面如Tudou.com，因为格局的需求，还应正在“头”的上面还要加个“菜单”。。
3. .list-t 文字列表形式
2. .list-h 程度列表形式 (图片和文字成程度陈列)
1. .list-v 垂直列表形式 (图片和文字成垂直陈列)
以Tudou.com为 例，需求界说到public.css里的列表至多要有以次三种：
按我的了解， 页面上的消息实在就是没有同类型的列表。
一、框架
做前者也有多少年工夫了，没有敢说能把他看地多透，然而多多少少还是有些本人的货色。
模块的主体是由列表组成的，而列表里则蕴含数据块。咱们应将垂范的列表形式提取进去，放正在专用款式里（public.css）。
。模块的Class称号用.cols_1，.cols_2，。
</div>
</div>
<div class=“d_subject”>专题：<span><a href=“” title=“”>±¬ÁÏ</a></span></div>
<div class=“d_tag”>标签：<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”>评说：<span>323</span></div>
<div class=“d_view”>人气：<span>222</span></div>
<div class=“d_honor”>声誉：<span><img src=“” alt=“Ç¿” /></span></div>
<div class=“d_intro”>阿联又挂花阿联又挂花阿联又挂花</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=“”>阿联又挂花 无望首演战牯牛</a></div>
<div class=“d_name”><a href=“” title=“”>阿联又挂花 无望首演战牯牛</a></div>
<div class=“d”>
<div class=“p”><a href=“” title=“”><img src=“” alt=“阿联又挂花 无望首演战牯牛” /></a></div>
<div class=“mVideo”>
比方 .mVideo 该当是那样的：
3. .mUser (用户)
2. .mList (豆单)
1. .mVideo (视频)
Tudou.com 需求界说的数据块有：
数据块实在是微体例的一度变相使用， 给没有同的数据元素界说流动的构造。
四、列表和数据块
模块外部的如次图
格局#Layout_1，#Layout_2里的块就是模块了，按我的理 解，模块至多要有一度ID，Class则要视页面设想，给需求重用的加上。就制造而言，我将一张页面分成四层：框架、格局、模块、列表和数据块。。咱们看 Tudou.com，#Main里垂范的内外构造，咱们用#Layout_1，#Layout_2示意。(义务编者：帝位库)
12. .current // 以后元素
11. .*_fix // *元素的布条元素
10. .m_*(.mVideo, .mComment, .mUser, .mSubject, …) // 数据块元素
9. .handle // 操作元素
8. .p, .d, .d_*, .h // 数据块内元素，辨别为图片、细致、细致内元素、操作
7. .b // 海报位
6. .s // 特别元素，假如一度元素绝对于于小弟节点特别，则用之
5. .s1, .s2, … // 用来子单元块需各自界说款式的元素，如菜单、横排榜等
4. .m // 更多，可蔓延至“相对于定坐落右上方”的元素
3. .list_*(.list_v, .list_h, .list-t, .list_top, …) // 列表元素，详见“列表”
2. .meat // 模块主体元素
1. .txt, .btn, .label_checkbox, .label_input, .handle // 表单内元素
Class
8. #Plugin // Banner用
7. #B* // 海报位，与class=”b”联合运用
6. #Links, #CopyRight // Foot内元素
5. #Layout_*, #Group_*, #Col_* // Main内元素
4. #Logo, #Toolbar, #Search, #Menu // Head内元素
3. #Message // 零碎信息用
2. #Head, #Main, #Foot //格局用ID
1. #B-* // Body用
ID
最初，附上要害字表，就是一些用来公共界说的ID和Class称号。对于于模块的ID称号，要取个成心义的名字，千万偷生的能够 用#Col_1，#Col_2，。。
三、模块
格局说的是将#Main里的形式分红多少大块。