版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第08課domcss編寫規(guī)范頁面結(jié)構(gòu)區(qū)塊（片區(qū)、坑）模塊布局第08課domcss編寫規(guī)范頁面結(jié)構(gòu)1淘寶高級SDK模板制作08domcss2<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ū)塊--> <!--這里只能是模塊,可以有多個(gè)模塊--> <divclass="boxJ_TBox"></div> <!--模塊內(nèi)容--> </div> </div> </div> </div> <divid="ft"><!--店鋪頁尾--></div> </div> <divid-"footer">淘寶頁尾</div> </body></html><html>3開放的區(qū)域:
設(shè)計(jì)師設(shè)計(jì)的是不完整頁面，開放給設(shè)計(jì)師的頁面區(qū)域在
<divid="content"class="tb-shop"></div>
這個(gè)標(biāo)簽內(nèi)。開放的區(qū)域:
設(shè)計(jì)師設(shè)計(jì)的是不完整頁面，開放給4命名空間：
<divid="content"class="tb-shop"></div>，該設(shè)計(jì)區(qū)域的CSS樣式有命名空間限制，需要以.tb-shop為namespace(命名空間)的名稱。.tb-shop系統(tǒng)會自動給加上的，不建議開發(fā)者自己添加以.tb-shop開頭的樣式。
命名空間：
<divid="content"class=5CSS選擇器規(guī)范:
設(shè)計(jì)師不能添加id選擇器；如<divid=“XXX”></div>,是不允許的。
不允許以tb-開頭（tb-shop除外，tb-開頭的樣式是淘寶class名保留詞）;
除了.J_TBox和.J_TRegion以外，其它選擇器只能包含小寫字母(a-z),數(shù)字(0-9),點(diǎn)(.),下劃線(_),橫線(-),冒號(:)
css文件中選擇器的屬性及其值都支持大小寫。
CSS選擇器規(guī)范:
設(shè)計(jì)師不能添加id選擇器6淘寶頁頭說明:
店鋪頁頭：頁面中開放給設(shè)計(jì)師設(shè)計(jì)的店鋪?zhàn)约旱捻擃^。在簡易模板中：C旺鋪和商城對首頁的店鋪頁頭高度沒有限制，但列表頁和詳情頁仍然會有高度的限制。商城支持的最大高度為150px;C旺鋪支持的最大高度為250px;如果想設(shè)計(jì)的模板頁頭內(nèi)容能在商城及C旺鋪的所有頁面通用，就最好把頁頭的內(nèi)容控制在150px之內(nèi)。商城列表頁要支持250px;
淘寶頁頭說明:
店鋪頁頭：頁面中開放給設(shè)計(jì)師設(shè)7<!--布局-->
<divclass="main-wrapJ_TRegion">
<!--區(qū)塊-->
<!--這里只能是模塊,可以有多個(gè)模塊-->
<divclass="boxJ_TBox"></div>
<!--模塊內(nèi)容-->
</div>
</div>區(qū)塊(片區(qū)、坑)<!--布局-->
<divclass="main-wra8說明：
CSS規(guī)范：class=“main-wrapJ_TRegion”中，J_TRegion是設(shè)計(jì)區(qū)域時(shí)必須添加的樣式，其他的樣式名如”main-wrap”是設(shè)計(jì)師可以自己添加的樣式；
一個(gè)區(qū)塊內(nèi)可以添加多個(gè)模塊。
區(qū)塊(片區(qū)、坑)說明：
CSS規(guī)范：class=“main-9<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="layoutgrid-m">
<10<divclass=“boxJ_TBox”>
<!—這里是模塊內(nèi)容-->
</div>模塊<divclass=“boxJ_TBox”>
11說明：
CSS規(guī)范：class=“boxJ_TBox”中，J_TBox是設(shè)計(jì)模塊時(shí)必須添加的樣式名，其他的樣式名如”box”是設(shè)計(jì)師可以自己添加的樣式。
自定義樣式.box{……}中的內(nèi)容建議不要涉及float、position等這樣對模塊的位置進(jìn)行定義的樣式
建議不要用table來充當(dāng)模塊，否則效果將不明顯或報(bào)錯(cuò)
模塊說明：
CSS規(guī)范：class=“box12官方對于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)容，建議：在模塊內(nèi)容和模塊div標(biāo)簽本身再添加一層div，如紅色框所示。模塊官方對于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)13模塊模塊14模塊模塊15模塊模塊16模塊模塊17說明：
1、淘寶店鋪有系統(tǒng)布局
設(shè)計(jì)師在設(shè)計(jì)簡易模板的時(shí)候，只能通過布局管理添加系統(tǒng)支持的布局。
2、設(shè)計(jì)師在設(shè)計(jì)sdk模板的時(shí)候，設(shè)計(jì)師可以設(shè)計(jì)自己的布局，系統(tǒng)對sdk模板的布局沒有作任何限制。此時(shí)設(shè)計(jì)師可以參考系統(tǒng)布局設(shè)計(jì)自己的布局結(jié)構(gòu)，也可以使用系統(tǒng)布局，然后覆蓋系統(tǒng)的布局樣式，設(shè)計(jì)自己的布局樣式。
布局說明：
1、淘寶店鋪有系統(tǒng)布局
設(shè)計(jì)師在設(shè)18布局淘寶的六種系統(tǒng)布局布局淘寶的六種系統(tǒng)布局19布局命名規(guī)則：
通欄布局（.grid-m）
兩欄布局（.grid-sXm0）
三欄布局（.grid-sXm0eY）
系統(tǒng)布局的樣式在這個(gè)樣式文件中/p/tshop/base.css
布局命名規(guī)則：
通欄布局（.grid-m）
兩欄布局（.gr20命名含義如下：
當(dāng)單元列的寬度為40px的倍數(shù)時(shí)，
sX表示col-sub的寬度=X*40-10,
eY表示col-extra的寬度=Y*40-10,
m0表示col-main的寬度=總寬度-(X+Y)*40,
sme的順序，可以按全排列排序，sXm0eY表示各列的排列順序。
比如：總寬為950px時(shí)，.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ù)時(shí)，
21當(dāng)單元列的寬度不為40px的倍數(shù)時(shí)，sX和eY中的X和Y直接表示寬度
比如：總寬為950px時(shí)，.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-extra{width:50px;margin-left:-50px;}當(dāng)單元列的寬度不為40px的倍數(shù)時(shí)，sX和eY中的X和22通欄和兩欄（左右欄）
說明：上層為通欄，下層為兩欄（左右欄）
頁面顯示：通欄和兩欄（左右欄）
說明：上層為通欄，下層為兩欄（左右欄23頁面代碼：頁面代碼：24三欄布局說明：總體分為兩欄（左右欄）：綠色框?yàn)樽髠?cè)欄，紅色框?yàn)橹鳈?，紅色框主欄又分為左右兩欄，黑色框部分
頁面顯示：三欄布局說明：總體分為兩欄（左右欄）：綠色框?yàn)樽髠?cè)欄，紅色25頁面代碼：頁面代碼：26感謝您的關(guān)注!感謝您的關(guān)注!27第08課domcss編寫規(guī)范頁面結(jié)構(gòu)區(qū)塊（片區(qū)、坑）模塊布局第08課domcss編寫規(guī)范頁面結(jié)構(gòu)28淘寶高級SDK模板制作08domcss29<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ū)塊--> <!--這里只能是模塊,可以有多個(gè)模塊--> <divclass="boxJ_TBox"></div> <!--模塊內(nèi)容--> </div> </div> </div> </div> <divid="ft"><!--店鋪頁尾--></div> </div> <divid-"footer">淘寶頁尾</div> </body></html><html>30開放的區(qū)域:
設(shè)計(jì)師設(shè)計(jì)的是不完整頁面，開放給設(shè)計(jì)師的頁面區(qū)域在
<divid="content"class="tb-shop"></div>
這個(gè)標(biāo)簽內(nèi)。開放的區(qū)域:
設(shè)計(jì)師設(shè)計(jì)的是不完整頁面，開放給31命名空間：
<divid="content"class="tb-shop"></div>，該設(shè)計(jì)區(qū)域的CSS樣式有命名空間限制，需要以.tb-shop為namespace(命名空間)的名稱。.tb-shop系統(tǒng)會自動給加上的，不建議開發(fā)者自己添加以.tb-shop開頭的樣式。
命名空間：
<divid="content"class=32CSS選擇器規(guī)范:
設(shè)計(jì)師不能添加id選擇器；如<divid=“XXX”></div>,是不允許的。
不允許以tb-開頭（tb-shop除外，tb-開頭的樣式是淘寶class名保留詞）;
除了.J_TBox和.J_TRegion以外，其它選擇器只能包含小寫字母(a-z),數(shù)字(0-9),點(diǎn)(.),下劃線(_),橫線(-),冒號(:)
css文件中選擇器的屬性及其值都支持大小寫。
CSS選擇器規(guī)范:
設(shè)計(jì)師不能添加id選擇器33淘寶頁頭說明:
店鋪頁頭：頁面中開放給設(shè)計(jì)師設(shè)計(jì)的店鋪?zhàn)约旱捻擃^。在簡易模板中：C旺鋪和商城對首頁的店鋪頁頭高度沒有限制，但列表頁和詳情頁仍然會有高度的限制。商城支持的最大高度為150px;C旺鋪支持的最大高度為250px;如果想設(shè)計(jì)的模板頁頭內(nèi)容能在商城及C旺鋪的所有頁面通用，就最好把頁頭的內(nèi)容控制在150px之內(nèi)。商城列表頁要支持250px;
淘寶頁頭說明:
店鋪頁頭：頁面中開放給設(shè)計(jì)師設(shè)34<!--布局-->
<divclass="main-wrapJ_TRegion">
<!--區(qū)塊-->
<!--這里只能是模塊,可以有多個(gè)模塊-->
<divclass="boxJ_TBox"></div>
<!--模塊內(nèi)容-->
</div>
</div>區(qū)塊(片區(qū)、坑)<!--布局-->
<divclass="main-wra35說明：
CSS規(guī)范：class=“main-wrapJ_TRegion”中，J_TRegion是設(shè)計(jì)區(qū)域時(shí)必須添加的樣式，其他的樣式名如”main-wrap”是設(shè)計(jì)師可以自己添加的樣式；
一個(gè)區(qū)塊內(nèi)可以添加多個(gè)模塊。
區(qū)塊(片區(qū)、坑)說明：
CSS規(guī)范：class=“main-36<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="layoutgrid-m">
<37<divclass=“boxJ_TBox”>
<!—這里是模塊內(nèi)容-->
</div>模塊<divclass=“boxJ_TBox”>
38說明：
CSS規(guī)范：class=“boxJ_TBox”中，J_TBox是設(shè)計(jì)模塊時(shí)必須添加的樣式名，其他的樣式名如”box”是設(shè)計(jì)師可以自己添加的樣式。
自定義樣式.box{……}中的內(nèi)容建議不要涉及float、position等這樣對模塊的位置進(jìn)行定義的樣式
建議不要用table來充當(dāng)模塊，否則效果將不明顯或報(bào)錯(cuò)
模塊說明：
CSS規(guī)范：class=“box39官方對于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)容，建議：在模塊內(nèi)容和模塊div標(biāo)簽本身再添加一層div，如紅色框所示。模塊官方對于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)40模塊模塊41模塊模塊42模塊模塊43模塊模塊44說明：
1、淘寶店鋪有系統(tǒng)布局
設(shè)計(jì)師在設(shè)計(jì)簡易模板的時(shí)候，只能通過布局管理添加系統(tǒng)支持的布局。
2、設(shè)計(jì)師在設(shè)計(jì)sdk模板的時(shí)候，設(shè)計(jì)師可以設(shè)計(jì)自己的布局，系統(tǒng)對sdk模板的布局沒有作任何限制。此時(shí)設(shè)計(jì)師可以參考系統(tǒng)布局設(shè)計(jì)自己的布局結(jié)構(gòu)，也可以使用系統(tǒng)布局，然后覆蓋系統(tǒng)的布局樣式，設(shè)計(jì)自己的布局樣式。
布局說明：
1、淘寶店鋪有系統(tǒng)布局
設(shè)計(jì)師在設(shè)45布局淘寶的六種系統(tǒng)布局布局淘寶的六種系統(tǒng)布局46布局命名規(guī)則：
通欄布局（.grid-m）
兩欄布局（.grid-sXm0）
三欄布局（.grid-sXm0eY）
系統(tǒng)布局的樣式在這個(gè)樣式文件中/p/tshop/base.css
布局命名規(guī)則：
通欄布局（.grid-m）
兩欄布局（.gr47命名含義如下：
當(dāng)單元列的寬度為40px的倍數(shù)時(shí)，
sX表示col-sub的寬度=X*40-10,
eY表示col-extra的寬度=Y*40-10,
m0表示col-main的寬度=總寬度-(X+Y)*40,
sme的順序，可以按全排列排序，sXm0eY表示各列的排列順序。
比如：總寬為950px時(shí)，.grid-e6m0s5表示col-extra(230)|col-main(510)|col-sub(1
溫馨提示
- 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 農(nóng)民土地承包權(quán)轉(zhuǎn)讓合同
- 12《富起來到強(qiáng)起來》教學(xué)設(shè)計(jì)、教材分析與教學(xué)反思、課前任務(wù)單2023-2024學(xué)年道德與法治五年級下冊統(tǒng)編版
- 3我認(rèn)識您了 教學(xué)設(shè)計(jì)-2023-2024學(xué)年道德與法治一年級上冊統(tǒng)編版
- 20《肥皂泡》第一課時(shí) 教學(xué)設(shè)計(jì)-2023-2024學(xué)年統(tǒng)編版語文三年級下冊
- 個(gè)人借款中介合同范本
- 2024-2025學(xué)年初中生物課后服務(wù)活動教學(xué)設(shè)計(jì)：生態(tài)系統(tǒng)的平衡與保護(hù)
- 礦石洗選加工合同合同范本
- 8的乘法（教學(xué)設(shè)計(jì)）-2024-2025學(xué)年二年級上冊數(shù)學(xué)滬教版
- 5《雷雨》節(jié)選（教學(xué)設(shè)計(jì)）-2024-2025學(xué)年高一語文下學(xué)期同步教學(xué)教學(xué)設(shè)計(jì)專輯（統(tǒng)編版必修下冊）
- 瓷磚合同范本
- 語言學(xué)綱要(新)課件
- 心理評估與診斷簡介課件
- 移動式壓力容器充裝復(fù)審換證考試重點(diǎn)題庫（180題）
- 小班安全《湯姆走丟了》PPT課件教案反思微視頻
- 作物栽培學(xué)課件棉花
- 最新小學(xué)二年級口算及豎式計(jì)算練習(xí)題
- 生產(chǎn)與運(yùn)作管理-陳榮秋
- 金雞冠的公雞繪本課件
- 日影朝向及長短
- 沙盤游戲治療（課堂PPT）
- (完整版)學(xué)生的自我評價(jià)的表格
評論
0/150
提交評論