单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第08课 dom css编写规范,页面结构,区块（片区、坑）,模块,布局,淘宝导航栏,淘宝页头,淘宝页尾,开放的区域:,设计师设计的是不完整页面，开放给设计师的页面区域在这个标签内。,命名空间：,，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。,CSS选择器规范:,设计师不能添加id选择器；如,是不允许的。不允许以tb-开头（tb-shop除外，tb-开头的样式是淘宝class名保留词）;除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)css 文件中选择器的属性及其值都支持大小写。,淘宝页头说明:,店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150px;C旺铺支持的最大高度为250px;如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250px;,区块(片区、坑),说明：,CSS规范：“main-wrap J_TRegion”中，J_TRegion是设计区域时必须添加的样式，其他的样式名如”main-wrap”是设计师可以自己添加的样式；一个区块内可以添加多个模块。,区块(片区、坑),模块,说明：,CSS,规,规范：,“,“box J_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,sm e,的,的顺,序,序，可,以,以按全,排,排列排,序,序，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;,通栏和,两,两栏（,左,左右栏,）,）,说,说明：,上,上层为,通,通栏，,下,下层为,两,两栏（,左,左右栏,）,）页,面,面显示,：,：,页面代,码,码：,三栏布,局,局 说,明,明：总,体,体分为,两,两栏（,左,左右栏,）,）：绿,色,色框为,左,左侧栏,，,，红色,框,框为主,栏,栏，红,色,色框主,栏,栏又分,为,为左右,两,两栏，,黑,黑色框,部,部分,页,页面,显,显示：,页面代,码,码：,感谢您,的,的关注!,演讲完,毕,毕，谢,谢,谢观看,！,！,