淘寶高級(jí)SDK模板制作08domcss

1、第08課 dom css編寫規(guī)范頁(yè)面結(jié)構(gòu)區(qū)塊（片區(qū)、坑） 模塊布局淘寶導(dǎo)導(dǎo)航欄淘寶寶頁(yè)頭淘寶寶頁(yè)尾開放的區(qū)區(qū)域:設(shè)計(jì)師設(shè)設(shè)計(jì)的是是不完整整頁(yè)面，開放給給設(shè)計(jì)師師的頁(yè)面面區(qū)域在在這這個(gè)標(biāo)標(biāo)簽內(nèi)。命名空間間：，該設(shè)設(shè)計(jì)區(qū)域域的CSS樣式式有命名名空間限限制，需需要以.tb-shop為namespace(命名空空間)的的名稱。.tb-shop系系統(tǒng)會(huì)自自動(dòng)給加加上的，不建議議開發(fā)者者自己添添加以.tb-shop開頭頭的樣式式。CSS選選擇器規(guī)規(guī)范:設(shè)計(jì)師不不能添加加id選選擇器；如,是不不允許的的。不不允允許以tb-開開頭（tb-shop除外，tb-開頭的的樣式是是淘寶class名保保留詞）;除除了

2、.J_TBox和.J_TRegion以以外，其其它選擇擇器只能能包含小小寫字母母(a-z),數(shù)字(0-9),點(diǎn)點(diǎn)(.),下劃劃線(_),橫橫線(-),冒冒號(hào)(:)css文文件中中選擇器器的屬性性及其值值都支持持大小寫寫。淘寶頁(yè)頭頭說(shuō)明:店鋪?lái)?yè)頭頭：頁(yè)面面中開放放給設(shè)計(jì)計(jì)師設(shè)計(jì)計(jì)的店鋪鋪?zhàn)约旱牡捻?yè)頭。在簡(jiǎn)易易模板中中：C旺旺鋪和商商城對(duì)首首頁(yè)的店店鋪?lái)?yè)頭頭高度沒(méi)沒(méi)有限制制，但列列表頁(yè)和和詳情頁(yè)頁(yè)仍然會(huì)會(huì)有高度度的限制制。商城城支持的的最大高高度為150px;C旺鋪支支持的最最大高度度為250px;如如果想設(shè)設(shè)計(jì)的模模板頁(yè)頭頭內(nèi)容能能在商城城及C旺旺鋪的所所有頁(yè)面面通用，就最好好把頁(yè)頭頭的內(nèi)容容控

3、制在在150px之之內(nèi)。商商城列表表頁(yè)要支支持250px;區(qū)塊(片片區(qū)、坑坑)說(shuō)明：CSS規(guī)規(guī)范：class=“main-wrap J_TRegion”中中，J_TRegion是是設(shè)計(jì)區(qū)區(qū)域時(shí)必必須添加加的樣式式，其他他的樣式式名如” main-wrap”是是設(shè)計(jì)師師可以自自己添加加的樣式式；一一個(gè)區(qū)塊塊內(nèi)可以以添加多多個(gè)模塊塊。區(qū)塊(片片區(qū)、坑坑)模塊說(shuō)明：CSS規(guī)規(guī)范：class=“box J_TBox”中中，J_TBox是是設(shè)計(jì)模模塊時(shí)必必須添加加的樣式式名，其其他的樣樣式名如如”box”是是設(shè)計(jì)師師可以自自己添加加的樣式式。自自定義樣樣式.box中的內(nèi)內(nèi)容建議議不要涉涉及float、p

4、osition等這樣樣對(duì)模塊塊的位置置進(jìn)行定定義的樣樣式建建議不要要用table來(lái)充當(dāng)當(dāng)模塊，否則效效果將不不明顯或或報(bào)錯(cuò)模塊官方對(duì)于于模塊dom結(jié)結(jié)構(gòu)的建建議：綠綠色框里里面的內(nèi)內(nèi)容是模模塊本身身的內(nèi)容容，建議議：在模模塊內(nèi)容容和模塊塊div標(biāo)簽本本身再添添加一層層div，如紅紅色框所所示。模塊模塊模塊模塊模塊說(shuō)明：1、淘寶寶店鋪有有系統(tǒng)布布局設(shè)設(shè)計(jì)師師在設(shè)計(jì)計(jì)簡(jiǎn)易模模板的時(shí)時(shí)候，只只能通過(guò)過(guò)布局管管理添加加系統(tǒng)支支持的布布局。2、設(shè)計(jì)計(jì)師在設(shè)設(shè)計(jì)sdk模板板的時(shí)候候，設(shè)計(jì)計(jì)師可以以設(shè)計(jì)自自己的布布局，系系統(tǒng)對(duì)sdk模模板的布布局沒(méi)有有作任何何限制。此時(shí)設(shè)設(shè)計(jì)師可可以參考考系統(tǒng)布布局設(shè)計(jì)計(jì)自

5、己的的布局結(jié)結(jié)構(gòu)，也也可以使使用系統(tǒng)統(tǒng)布局，然后覆覆蓋系統(tǒng)統(tǒng)的布局局樣式，設(shè)計(jì)自自己的布布局樣式式。布局布局淘寶的六六種系統(tǒng)統(tǒng)布局布局命名規(guī)則則：通欄布局局（.grid-m）兩欄欄布局（.grid-sXm0）三三欄布布局（.grid-sXm0eY）系系統(tǒng)布局局的樣式式在這個(gè)個(gè)樣式文文件中http:/p/tshop/base.css命名含義義如下：當(dāng)單元列列的寬度度為40px 的倍倍數(shù)時(shí)，sX表表示col-sub 的寬寬度= X*40- 10,eY表表示col-extra 的寬寬度= Y*40- 10,m0表表示col-main的的寬度度 =總總寬度度 -(X+Y)* 40,sm e的的順序序，

6、可以以按全排排列排序序，sXm0eY表示示各列的的排列順順序。比比如如：總寬寬為950px時(shí)時(shí)，.grid-e6m0s5表表示col-extra(230)| col-main(510)|col-sub(190).對(duì)應(yīng)應(yīng)的樣式式為：.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%;當(dāng)單元列列的寬度度不為40px的倍數(shù)數(shù)時(shí)，sX和和eY中中的X和和Y 直接接表示寬寬度比比如：總寬為為 950px 時(shí)，.grid-s120m0e50 表示示 col-sub(120)| col-main(760)|col-extra(50),對(duì)對(duì)應(yīng)的的樣式為為：.grid-s120m0e50 .main-wrapmargin: 0130px060px;.grid-s120m0e50.col-subwidth:120px; margin-left:-100%;.grid-s120m0e50 .col-extrawidth:50px;margin-left: -50px;通欄和兩兩欄（左左右欄）說(shuō)說(shuō)明：上上層為通通欄，下下層為兩