资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,第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,规,规范：class=,“,“main-wrap J,_,_TRegion”,中,中，J_TRegion,是,是设计,区,区域时,必,必须添,加,加的样,式,式，其,他,他的样,式,式名如,”,”main,-,-wrap”,是,是设计,师,师可以,自,自己添,加,加的样,式,式；,一,一个区,块,块内可,以,以添加,多,多个模,块,块。,区块(,片,片区、,坑,坑),模块,说明：CSS,规,规范：class=,“,“box J,_,_TBox”,中,中，J_TBox,是,是设计,模,模块时,必,必须添,加,加的样,式,式名，,其,其他的,样,样式名,如,如”box”,是,是设计,师,师可以,自,自己添,加,加的样,式,式。,自,自定义,样,样式.box,中的,内,内容建,议,议不要,涉,涉及float、position等这,样,样对模,块,块的位,置,置进行,定,定义的,样,样式,建,建议不,要,要用table来充,当,当模块,，,，否则,效,效果将,不,不明显,或,或报错,模块,官方对,于,于模块dom,结,结构的,建,建议：,绿,绿色框,里,里面的,内,内容是,模,模块本,身,身的内,容,容，建,议,议：在,模,模块内,容,容和模,块,块div标签,本,本身再,添,添加一,层,层div，如,红,红色框,所,所示。,模块,模块,模块,模块,模块,说明：1、淘,宝,宝店铺,有,有系统,布,布局,设,设计,师,师在设,计,计简易,模,模板的,时,时候，,只,只能通,过,过布局,管,管理添,加,加系统,支,支持的,布,布局。2、设,计,计师在,设,设计sdk模,板,板的时,候,候，设,计,计师可,以,以设计,自,自己的,布,布局，,系,系统对sdk,模,模板的,布,布局没,有,有作任,何,何限制,。,。此时,设,设计师,可,可以参,考,考系统,布,布局设,计,计自己,的,的布局,结,结构，,也,也可以,使,使用系,统,统布局,，,，然后,覆,覆盖系,统,统的布,局,局样式,，,，设计,自,自己的,布,布局样,式,式。,布局,布局,淘宝的,六,六种系,统,统布局,布局,命名规,则,则：通栏布,局,局（.grid-m,）,）两,栏,栏布局,（,（.grid,-,-sXm0）,三,三栏,布,布局（,.,.grid-sXm0eY,）,）,系,系统布,局,局的样,式,式在这,个,个样式,文,文件中http:/,/,/ 的,倍,倍数时,，,，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,-,-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;,通栏和,两,两栏（,左,左右栏,）,）,说,说明：,上,上层为,通,通栏，,下,下层为,两,两栏（,左,左右栏,）,）页,面,面显示,：,：,页面代,码,码：,三栏布,局,局 说,明,明：总,体,体分为,两,两栏（,左,左右栏,）,）：绿,色,色框为,左,左侧栏,，,，红色,框,框为主,栏,栏，红,色,色框主,栏,栏又分,为,为左右,两,两栏，,黑,黑色框,部,部分,页,页面,显,显示：,页面代,码,码：,感谢您,的,的关注,!,!,
展开阅读全文