淘宝高级SDK模板制作08domcss

1、第08课 dom css编写规范页面结构区块（片区、坑） 模块布局淘宝导导航栏淘宝宝页头淘宝宝页尾开放的区区域:设计师设设计的是是不完整整页面，开放给给设计师师的页面面区域在在这这个标标签内。命名空间间：，该设设计区域域的CSS样式式有命名名空间限限制，需需要以.tb-shop为namespace(命名空空间)的的名称。.tb-shop系系统会自自动给加加上的，不建议议开发者者自己添添加以.tb-shop开头头的样式式。CSS选选择器规规范:设计师不不能添加加id选选择器；如,是不不允许的的。不不允允许以tb-开开头（tb-shop除外，tb-开头的的样式是是淘宝class名保保留词）;除除了

2、.J_TBox和.J_TRegion以以外，其其它选择择器只能能包含小小写字母母(a-z),数字(0-9),点点(.),下划划线(_),横横线(-),冒冒号(:)css文文件中中选择器器的属性性及其值值都支持持大小写写。淘宝页头头说明:店铺页头头：页面面中开放放给设计计师设计计的店铺铺自己的的页头。在简易易模板中中：C旺旺铺和商商城对首首页的店店铺页头头高度没没有限制制，但列列表页和和详情页页仍然会会有高度度的限制制。商城城支持的的最大高高度为150px;C旺铺支支持的最最大高度度为250px;如如果想设设计的模模板页头头内容能能在商城城及C旺旺铺的所所有页面面通用，就最好好把页头头的内容容控

3、制在在150px之之内。商商城列表表页要支支持250px;区块(片片区、坑坑)说明：CSS规规范：class=“main-wrap J_TRegion”中中，J_TRegion是是设计区区域时必必须添加加的样式式，其他他的样式式名如” main-wrap”是是设计师师可以自自己添加加的样式式；一一个区块块内可以以添加多多个模块块。区块(片片区、坑坑)模块说明：CSS规规范：class=“box J_TBox”中中，J_TBox是是设计模模块时必必须添加加的样式式名，其其他的样样式名如如”box”是是设计师师可以自自己添加加的样式式。自自定义样样式.box中的内内容建议议不要涉涉及float、p

4、osition等这样样对模块块的位置置进行定定义的样样式建建议不要要用table来充当当模块，否则效效果将不不明显或或报错模块官方对于于模块dom结结构的建建议：绿绿色框里里面的内内容是模模块本身身的内容容，建议议：在模模块内容容和模块块div标签本本身再添添加一层层div，如红红色框所所示。模块模块模块模块模块说明：1、淘宝宝店铺有有系统布布局设设计师师在设计计简易模模板的时时候，只只能通过过布局管管理添加加系统支支持的布布局。2、设计计师在设设计sdk模板板的时候候，设计计师可以以设计自自己的布布局，系系统对sdk模模板的布布局没有有作任何何限制。此时设设计师可可以参考考系统布布局设计计自

5、己的的布局结结构，也也可以使使用系统统布局，然后覆覆盖系统统的布局局样式，设计自自己的布布局样式式。布局布局淘宝的六六种系统统布局布局命名规则则：通栏布局局（.grid-m）两栏栏布局（.grid-sXm0）三三栏布布局（.grid-sXm0eY）系系统布局局的样式式在这个个样式文文件中http:/p/tshop/base.css命名含义义如下：当单元列列的宽度度为40px 的倍倍数时，sX表表示col-sub 的宽宽度= X*40- 10,eY表表示col-extra 的宽宽度= Y*40- 10,m0表表示col-main的的宽度度 =总总宽度度 -(X+Y)* 40,sm e的的顺序序，

6、可以以按全排排列排序序，sXm0eY表示示各列的的排列顺顺序。比比如如：总宽宽为950px时时，.grid-e6m0s5表表示col-extra(230)| col-main(510)|col-sub(190).对应应的样式式为：.grid-e6m0s5.main-wrap margin:0 200px 0240px; .grid-e6m0s5.col-sub width:190px;margin-left: -190px;.grid-e6m0s5 .col-extrawidth:230px; margin-left:-100%;当单元列列的宽度度不为40px的倍数数时，sX和和eY中中的X和和Y 直接接表示宽宽度比比如：总宽为为 950px 时，.grid-s120m0e50 表示示 col-sub(120)| col-main(760)|col-extra(50),对对应的的样式为为：.grid-s120m0e50 .main-wrapmargin: 0130px060px;.grid-s120m0e50.col-subwidth:120px; margin-left:-100%;.grid-s120m0e50 .col-extrawidth:50px;margin-left: -50px;通栏和两两栏（左左右栏）说说明：上上层为通通栏，下下层为两