淘宝模板开发系列之DOM、CSS规范

DOM、CSS规范

页面结构

页面整体图示：

(1)页面包含页头、内容、页尾

(2)内容包含店铺页头、店铺内容、店铺页尾

(3)店铺内容包含多个布局，布局可以包含多个模块

对应的html结构：

说明：

1. 开放的区域:

   此处发生改变，新规范将class=”tb-shop”去掉了，所以如果老模板以tb-shop开头书写的css样式将会失效；设计师模块class不允许以”tb-”开头。

2. 命名空间：

   <div id="content" class=" tb-shop " ></div>，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。

3. • CSS选择器规范:

     命名规范
     

   • 此处发生细节变动，请设计师认真阅读：所有的选择器必须包含模块名class，例如.custom-module-name .title{}或者.col-sub .custom-module-name h3{}设计师不能添加id选择器；比如#box 将被过滤。
   • 选择器不能使用.tb,.tb-shop 官方保留选择器;
   • 除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)
   • css 文件中选择器的属性及其值都支持大小写。
     支持的伪类(支持的伪类、支持的伪元素都未发生改变，详情可见如下链接： http://wiki.zx.taobao.com/index.php/DOM%E3%80%81CSS%E8%A7%84%E8%8C%83)
     
   •  :first-child
   •  :link
   •  :visited
   •  :hover
   •  :active
   •  :focus
     支持的伪元素
     
   •  :first-letter
   •  :first-line
   •  :before
   •  :after