淘寶高級SDK模板制作08domcss

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

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

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

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

5、己的的布局結(jié)結(jié)構(gòu)，也也可以使使用系統(tǒng)統(tǒng)布局，然后覆覆蓋系統(tǒng)統(tǒng)的布局局樣式，設計自自己的布布局樣式式。布局布局淘寶的六六種系統(tǒng)統(tǒng)布局布局命名規(guī)則則：通欄布局局（.grid-m）兩欄欄布局（.grid-sXm0）三三欄布布局（.grid-sXm0eY）系系統(tǒng)布局局的樣式式在這個個樣式文文件中http:/p/tshop/base.css命名含義義如下：當單元列列的寬度度為40px 的倍倍數(shù)時，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的倍數(shù)數(shù)時，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;通欄和兩兩欄（左左右欄）說說明：上上層為通通欄，下下層為兩