淘寶高級SDK模板制作08domcss_第1頁
淘寶高級SDK模板制作08domcss_第2頁
淘寶高級SDK模板制作08domcss_第3頁
淘寶高級SDK模板制作08domcss_第4頁
淘寶高級SDK模板制作08domcss_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第08課domcss編寫規(guī)范頁面結(jié)構(gòu)區(qū)塊（片區(qū)、坑）模塊布局<html> <head> </head> <body> <divid="site-nav">淘寶導(dǎo)航欄</div> <divid="header">淘寶頁頭</div> <divid="content"class="tb-shop"> <divid="hd"><!--店鋪頁頭--></div> <divid="bd"> <!--店鋪內(nèi)容--> <divclass="layoutgrid-xxxx"> <!--布局--> <divclass="main-wrapJ_TRegion"> <!--區(qū)塊--> <!--這里只能是模塊,可以有多個模塊--> <divclass="boxJ_TBox"></div> <!--模塊內(nèi)容--> </div> </div> </div> </div> <divid="ft"><!--店鋪頁尾--></div> </div> <divid-"footer">淘寶頁尾</div> </body></html>開放的區(qū)域:

設(shè)計(jì)師設(shè)計(jì)的是不完整頁面，開放給設(shè)計(jì)師的頁面區(qū)域在

<divid="content"class="tb-shop"></div>

這個標(biāo)簽內(nèi)。命名空間：

<divid="content"class="tb-shop"></div>，該設(shè)計(jì)區(qū)域的CSS樣式有命名空間限制，需要以.tb-shop為namespace(命名空間)的名稱。.tb-shop系統(tǒng)會自動給加上的，不建議開發(fā)者自己添加以.tb-shop開頭的樣式。

CSS選擇器規(guī)范:

設(shè)計(jì)師不能添加id選擇器；如<divid=“XXX”></div>,是不允許的。

不允許以tb-開頭（tb-shop除外，tb-開頭的樣式是淘寶class名保留詞）;

除了.J_TBox和.J_TRegion以外，其它選擇器只能包含小寫字母(a-z),數(shù)字(0-9),點(diǎn)(.),下劃線(_),橫線(-),冒號(:)

css文件中選擇器的屬性及其值都支持大小寫。

淘寶頁頭說明:

店鋪頁頭：頁面中開放給設(shè)計(jì)師設(shè)計(jì)的店鋪?zhàn)约旱捻擃^。在簡易模板中：C旺鋪和商城對首頁的店鋪頁頭高度沒有限制，但列表頁和詳情頁仍然會有高度的限制。商城支持的最大高度為150px;C旺鋪支持的最大高度為250px;如果想設(shè)計(jì)的模板頁頭內(nèi)容能在商城及C旺鋪的所有頁面通用，就最好把頁頭的內(nèi)容控制在150px之內(nèi)。商城列表頁要支持250px;

<!--布局-->

<divclass="main-wrapJ_TRegion">

<!--區(qū)塊-->

<!--這里只能是模塊,可以有多個模塊-->

<divclass="boxJ_TBox"></div>

<!--模塊內(nèi)容-->

</div>

</div>區(qū)塊(片區(qū)、坑)說明：

CSS規(guī)范：class=“main-wrapJ_TRegion”中，J_TRegion是設(shè)計(jì)區(qū)域時必須添加的樣式，其他的樣式名如”main-wrap”是設(shè)計(jì)師可以自己添加的樣式；

一個區(qū)塊內(nèi)可以添加多個模塊。

區(qū)塊(片區(qū)、坑)<divclass="layoutgrid-m">

<divclass="col-main">

<divclass="main-wrapJ_TRegion>

<divclass="boxJ_TBox"></div>

<divclass="boxJ_TBox"></div>

<divclass="boxJ_TBox"></div>

<divclass="boxJ_TBox"></div>

<divclass="boxJ_TBox"></div>

<divclass="boxJ_TBox"></div>

</div>

</div>

</div><divclass=“boxJ_TBox”>

<!—這里是模塊內(nèi)容-->

</div>模塊說明：

CSS規(guī)范：class=“boxJ_TBox”中，J_TBox是設(shè)計(jì)模塊時必須添加的樣式名，其他的樣式名如”box”是設(shè)計(jì)師可以自己添加的樣式。

自定義樣式.box{……}中的內(nèi)容建議不要涉及float、position等這樣對模塊的位置進(jìn)行定義的樣式

建議不要用table來充當(dāng)模塊，否則效果將不明顯或報(bào)錯

模塊官方對于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)容，建議：在模塊內(nèi)容和模塊div標(biāo)簽本身再添加一層div，如紅色框所示。模塊模塊模塊模塊模塊說明：

1、淘寶店鋪有系統(tǒng)布局

設(shè)計(jì)師在設(shè)計(jì)簡易模板的時候，只能通過布局管理添加系統(tǒng)支持的布局。

2、設(shè)計(jì)師在設(shè)計(jì)sdk模板的時候，設(shè)計(jì)師可以設(shè)計(jì)自己的布局，系統(tǒng)對sdk模板的布局沒有作任何限制。此時設(shè)計(jì)師可以參考系統(tǒng)布局設(shè)計(jì)自己的布局結(jié)構(gòu)，也可以使用系統(tǒng)布局，然后覆蓋系統(tǒng)的布局樣式，設(shè)計(jì)自己的布局樣式。

布局布局淘寶的六種系統(tǒng)布局布局命名規(guī)則：

通欄布局（.grid-m）

兩欄布局（.grid-sXm0）

三欄布局（.grid-sXm0eY）

系統(tǒng)布局的樣式在這個樣式文件中/p/tshop/base.css

命名含義如下：

當(dāng)單元列的寬度為40px的倍數(shù)時，

sX表示col-sub的寬度=X*40-10,

eY表示col-extra的寬度=Y*40-10,

m0表示col-main的寬度=總寬度-(X+Y)*40,

sme的順序，可以按全排列排序，sXm0eY表示各列的排列順序。

比如：總寬為950px時，.grid-e6m0s5表示col-extra(230)|col-main(510)|col-sub(190).

對應(yīng)的樣式為：

.grid-e6m0s5.main-wrap{margin:0200px0240px;}

.grid-e6m0s5.col-sub{width:190px;margin-left:-190px;}

.grid-e6m0s5.col-extra{width:230px;margin-left:-100%;}

當(dāng)單元列的寬度不為40px的倍數(shù)時，sX和eY中的X和Y直接表示寬度

比如：總寬為950px時，.grid-s120m0e50表示col-sub(120)|col-main(760)|col-extra(50),

對應(yīng)的樣式為：

.grid-s120m0e50.main-wrap{margin:0130px060px;}

.grid-s120m0e50.col-sub{width:120px;margin-left:-100%;}

.grid-s120m0e50.col-

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論