淘宝高级SDK模板制作08domcss

第08课domcss编写规范•页面结构•区块（片区、坑）•模块•布局htmlhead/headbodydivid=site-nav淘宝导航栏/divdivid=header淘宝页头/divdivid=contentclass=tb-shopdivid=hd!--店铺页头--/divdivid=bd!--店铺内容--divclass=layoutgrid-xxxx!--布局--divclass=main-wrapJ_TRegion!--区块--!--这里只能是模块,可以有多个模块--divclass=boxJ_TBox/div!--模块内容--/div/div/div/divdivid=ft!--店铺页尾--/div/divdivid-footer淘宝页尾/div/body/html开放的区域:设计师设计的是不完整页面，开放给设计师的页面区域在divid=contentclass=tb-shop/div这个标签内。命名空间：divid=contentclass=tb-shop/div，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。CSS选择器规范:设计师不能添加id选择器；如divid=“XXX”/div,是不允许的。不允许以tb-开头（tb-shop除外，tb-开头的样式是淘宝class名保留词）;除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)css文件中选择器的属性及其值都支持大小写。淘宝页头说明:店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150px;C旺铺支持的最大高度为250px;如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250px;!--布局--divclass=main-wrapJ_TRegion!--区块--!--这里只能是模块,可以有多个模块--divclass=boxJ_TBox/div!--模块内容--/div/div区块(片区、坑)说明：CSS规范：class=“main-wrapJ_TRegion”中，J_TRegion是设计区域时必须添加的样式，其他的样式名如”main-wrap”是设计师可以自己添加的样式；一个区块内可以添加多个模块。区块(片区、坑)divclass=layoutgrid-mdivclass=col-maindivclass=main-wrapJ_TRegiondivclass=boxJ_TBox/divdivclass=boxJ_TBox/divdivclass=boxJ_TBox/divdivclass=boxJ_TBox/divdivclass=boxJ_TBox/divdivclass=boxJ_TBox/div/div/div/divdivclass=“boxJ_TBox”!—这里是模块内容--/div模块说明：CSS规范：class=“boxJ_TBox”中，J_TBox是设计模块时必须添加的样式名，其他的样式名如”box”是设计师可以自己添加的样式。自定义样式.box{……}中的内容建议不要涉及float、position等这样对模块的位置进行定义的样式建议不要用table来充当模块，否则效果将不明显或报错模块官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内容，建议：在模块内容和模块div标签本身再添加一层div，如红色框所示。模块模块模块模块模块说明：1、淘宝店铺有系统布局设计师在设计简易模板的时候，只能通过布局管理添加系统支持的布局。2、设计师在设计sdk模板的时候，设计师可以设计自己的布局，系统对sdk模板的布局没有作任何限制。此时设计师可以参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。布局布局淘宝的六种系统布局布局命名规则：通栏布局（.grid-m）两栏布局（.grid-sXm0）三栏布局（.grid-sXm0eY）系统布局的样式在这个样式文件中命名含义如下：当单元列的宽度为40px的倍数时，sX表示col-sub的宽度=X*40-10,eY表示col-extra的宽度=Y*40-10,m0表示col-main的宽度=总宽度-(X+Y)*40,sme的顺序，可以按全排列排序，sXm0eY表示各列的排列顺序。比如：总宽为950px时，.grid-e6m0s5表示col-extra(230)|col-main(510)|col-sub(190).对应的样式为：.grid-e6m0s5.main-wrap{margin:0200px0240px;}.grid-e6m0s5.col-sub{width:190px;margin-left:-190px;}.grid-e6m0s5.col-extra{width:230px;margin-left:-100%;}当单元列的宽度不为40px的倍数时，sX和eY中的X和Y直接表示宽度比如：总宽为950px时，.grid-s120m0e50表示col-sub(120)|col-main(760)|col-extra(50),对应的样式为：.grid-s120m0e50.main-wrap{margin:0130px060px;}.grid-s120m0e50.col-sub{width:120px;margin-left:-100%;}.grid-s120m0e50.col-extra{width:50px;margin-left:-50px;}通栏和两栏（左右栏）说明：上层为通栏，下层为两栏（左右栏）页面显示：页面代码：三栏布局说明：总体分为两栏（左右栏）：绿色框为左侧栏，红色框为主栏，红色框主栏又分为左右两栏，黑色框部分页面显示：页面代码：感谢您的关注!