淘寶高級(jí)SDK模板制作ppt課件

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

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

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

4、塊.模塊.闡明： 1、淘寶店鋪有系統(tǒng)規(guī)劃 設(shè)計(jì)師在設(shè)計(jì)簡(jiǎn)易模板的時(shí)候，只能經(jīng)過(guò)規(guī)劃管理添加系統(tǒng)支持的規(guī)劃。 2、設(shè)計(jì)師在設(shè)計(jì)sdk模板的時(shí)候，設(shè)計(jì)師可以設(shè)計(jì)本人的規(guī)劃，系統(tǒng)對(duì)sdk模板的規(guī)劃沒(méi)有作任何限制。此時(shí)設(shè)計(jì)師可以參考系統(tǒng)規(guī)劃設(shè)計(jì)本人的規(guī)劃構(gòu)造，也可以運(yùn)用系統(tǒng)規(guī)劃，然后覆蓋系統(tǒng)的規(guī)劃款式，設(shè)計(jì)本人的規(guī)劃款式。規(guī)劃.規(guī)劃淘寶的六種系統(tǒng)規(guī)劃.規(guī)劃命名規(guī)那么：通欄規(guī)劃.grid-m兩欄規(guī)劃.grid-sXm0三欄規(guī)劃.grid-sXm0eY 系統(tǒng)規(guī)劃的款式在這個(gè)款式文件中httpa.tbcdn/p/tshop/base.css.命名含義如下： 當(dāng)單元列的寬度為 40px 的倍數(shù)時(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 時(shí)，.grid-e6m0s5 表示 col-extra(230) | col-main(510) | col-sub(190).對(duì)應(yīng)的款式為： .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%; .當(dāng)單元列的寬度不為40px的倍數(shù)時(shí)， sX和eY中的X 和 Y 直接表示寬度 比如：總寬為 950px 時(shí)，.grid-s120m0e50 表示 col-sub(120) | col-main(760) | col-extra(50), 對(duì)應(yīng)的款式為： .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; .通欄和兩欄左右欄 闡明：上