淘寶高級SDK模板制作ppt課件

1、第08課 dom css編寫規(guī)范頁面構(gòu)造區(qū)塊片區(qū)、坑 模塊規(guī)劃.淘寶導航欄淘寶頁頭淘寶頁尾.開放的區(qū)域: 設計師設計的是不完好頁面，開放給設計師的頁面區(qū)域在這個標簽內(nèi)。.命名空間：，該設計區(qū)域的CSS款式有命名空間限制，需求以.tb-shop為namespace(命名空間)的稱號。.tb-shop系統(tǒng)會自動給加上的，不建議開發(fā)者本人添加以.tb-shop開頭的款式。 .CSS選擇器規(guī)范: 設計師不能添加id選擇器；如,是不允許的。 不允許以tb-開頭tb-shop除外，tb-開頭的款式是淘寶class名保管詞; 除了.J_TBox和.J_TRegion以外，其它選擇器只能包含小寫字母(a-z)

2、,數(shù)字(0-9),點(.),下劃線(_),橫線(-),冒號(:) css 文件中選擇器的屬性及其值都支持大小寫。 .淘寶頁頭闡明: 店鋪頁頭：頁面中開放給設計師設計的店鋪本人的頁頭。在簡易模板中：C旺鋪和商城對首頁的店鋪頁頭高度沒有限制，但列表頁和概略頁依然會有高度的限制。商城支持的最大高度為150px;C旺鋪支持的最大高度為250px; 假設想設計的模板頁頭內(nèi)容能在商城及C旺鋪的一切頁面通用，就最好把頁頭的內(nèi)容控制在150px之內(nèi)。商城列表頁要支持250px; .區(qū)塊(片區(qū)、坑).闡明： CSS規(guī)范：class=“main-wrap J_TRegion 中，J_TRegion是設計區(qū)域時必需

3、添加的款式，其他的款式名如 main-wrap是設計師可以本人添加的款式； 一個區(qū)塊內(nèi)可以添加多個模塊。 區(qū)塊(片區(qū)、坑). 模塊.闡明： CSS規(guī)范：class=“box J_TBox 中，J_TBox是設計模塊時必需添加的款式名，其他的款式名如box是設計師可以本人添加的款式。 自定義款式.box中的內(nèi)容建議不要涉及float、position等這樣對模塊的位置進展定義的款式 建議不要用table來充任模塊，否那么效果將不明顯或報錯 模塊.官方對于模塊dom構(gòu)造的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)容，建議：在模塊內(nèi)容和模塊div標簽本身再添加一層div，如紅色框所示。模塊.模塊.模塊.模

4、塊.模塊.闡明： 1、淘寶店鋪有系統(tǒng)規(guī)劃 設計師在設計簡易模板的時候，只能經(jīng)過規(guī)劃管理添加系統(tǒng)支持的規(guī)劃。 2、設計師在設計sdk模板的時候，設計師可以設計本人的規(guī)劃，系統(tǒng)對sdk模板的規(guī)劃沒有作任何限制。此時設計師可以參考系統(tǒng)規(guī)劃設計本人的規(guī)劃構(gòu)造，也可以運用系統(tǒng)規(guī)劃，然后覆蓋系統(tǒng)的規(guī)劃款式，設計本人的規(guī)劃款式。規(guī)劃.規(guī)劃淘寶的六種系統(tǒng)規(guī)劃.規(guī)劃命名規(guī)那么：通欄規(guī)劃.grid-m兩欄規(guī)劃.grid-sXm0三欄規(guī)劃.grid-sXm0eY 系統(tǒng)規(guī)劃的款式在這個款式文件中httpa.tbcdn/p/tshop/base.css.命名含義如下： 當單元列的寬度為 40px 的倍數(shù)時， sX 表示

5、 col-sub 的寬度 = X * 40 - 10, eY 表示 col-extra 的寬度 = Y * 40 - 10, m0 表示 col-main 的寬度 = 總寬度 - (X + Y) * 40, s m e 的順序，可以按全陳列排序，sXm0eY表示各列的陳列順序。 比如：總寬為 950px 時，.grid-e6m0s5 表示 col-extra(230) | col-main(510) | col-sub(190).對應的款式為： .grid-e6m0s5 .main-wrap margin: 0 200px 0 240px; .grid-e6m0s5 .col-sub widt

6、h: 190px; margin-left: -190px; .grid-e6m0s5 .col-extra width: 230px; margin-left: -100%; .當單元列的寬度不為40px的倍數(shù)時， sX和eY中的X 和 Y 直接表示寬度 比如：總寬為 950px 時，.grid-s120m0e50 表示 col-sub(120) | col-main(760) | col-extra(50), 對應的款式為： .grid-s120m0e50 .main-wrap margin: 0 130px 0 60px; .grid-s120m0e50 .col-sub width: 120px; margin-left: -100%; .grid-s120m0e50 .col-extra width: 50px; margin-left: -50px; .通欄和兩欄左右欄 闡明：上