版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第08課domcss編寫規(guī)范頁面結(jié)構(gòu)區(qū)塊（片區(qū)、坑）模塊布局第08課domcss編寫規(guī)范頁面結(jié)構(gòu)1淘寶高級(jí)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)會(huì)自動(dò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)(.),下劃線(_),橫線(-),冒號(hào)(:)
css文件中選擇器的屬性及其值都支持大小寫。
CSS選擇器規(guī)范:
設(shè)計(jì)師不能添加id選擇器6淘寶頁頭說明:
店鋪頁頭：頁面中開放給設(shè)計(jì)師設(shè)計(jì)的店鋪?zhàn)约旱捻擃^。在簡(jiǎn)易模板中：C旺鋪和商城對(duì)首頁的店鋪頁頭高度沒有限制，但列表頁和詳情頁仍然會(huì)有高度的限制。商城支持的最大高度為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等這樣對(duì)模塊的位置進(jìn)行定義的樣式
建議不要用table來充當(dāng)模塊，否則效果將不明顯或報(bào)錯(cuò)
模塊說明：
CSS規(guī)范：class=“box12官方對(duì)于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)容，建議：在模塊內(nèi)容和模塊div標(biāo)簽本身再添加一層div，如紅色框所示。模塊官方對(duì)于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)13模塊模塊14模塊模塊15模塊模塊16模塊模塊17說明：
1、淘寶店鋪有系統(tǒng)布局
設(shè)計(jì)師在設(shè)計(jì)簡(jiǎn)易模板的時(shí)候，只能通過布局管理添加系統(tǒng)支持的布局。
2、設(shè)計(jì)師在設(shè)計(jì)sdk模板的時(shí)候，設(shè)計(jì)師可以設(shè)計(jì)自己的布局，系統(tǒng)對(duì)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).
對(duì)應(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),
對(duì)應(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淘寶高級(jí)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)會(huì)自動(dò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)(.),下劃線(_),橫線(-),冒號(hào)(:)
css文件中選擇器的屬性及其值都支持大小寫。
CSS選擇器規(guī)范:
設(shè)計(jì)師不能添加id選擇器33淘寶頁頭說明:
店鋪頁頭：頁面中開放給設(shè)計(jì)師設(shè)計(jì)的店鋪?zhàn)约旱捻擃^。在簡(jiǎn)易模板中：C旺鋪和商城對(duì)首頁的店鋪頁頭高度沒有限制，但列表頁和詳情頁仍然會(huì)有高度的限制。商城支持的最大高度為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等這樣對(duì)模塊的位置進(jìn)行定義的樣式
建議不要用table來充當(dāng)模塊，否則效果將不明顯或報(bào)錯(cuò)
模塊說明：
CSS規(guī)范：class=“box39官方對(duì)于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)容，建議：在模塊內(nèi)容和模塊div標(biāo)簽本身再添加一層div，如紅色框所示。模塊官方對(duì)于模塊dom結(jié)構(gòu)的建議：綠色框里面的內(nèi)容是模塊本身的內(nèi)40模塊模塊41模塊模塊42模塊模塊43模塊模塊44說明：
1、淘寶店鋪有系統(tǒng)布局
設(shè)計(jì)師在設(shè)計(jì)簡(jiǎn)易模板的時(shí)候，只能通過布局管理添加系統(tǒng)支持的布局。
2、設(shè)計(jì)師在設(shè)計(jì)sdk模板的時(shí)候，設(shè)計(jì)師可以設(shè)計(jì)自己的布局，系統(tǒng)對(duì)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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 冷藏運(yùn)輸合同模板
- 場(chǎng)地租賃合同格式
- 2025加工家具訂貨合同書
- 2025年教科新版八年級(jí)歷史上冊(cè)月考試卷含答案
- 2025年湘教新版選擇性必修3歷史下冊(cè)月考試卷含答案
- 2025房屋買賣的合同樣本
- 2025年外研版三年級(jí)起點(diǎn)選修3地理上冊(cè)階段測(cè)試試卷含答案
- 2025年鋁擠壓材項(xiàng)目申請(qǐng)報(bào)告
- 2025年外研銜接版選修5歷史下冊(cè)月考試卷含答案
- 2025年合金鑄球段項(xiàng)目提案報(bào)告模范
- 北京市石景山區(qū)2024-2025學(xué)年九年級(jí)上學(xué)期期末考試數(shù)學(xué)試卷（含答案）
- 杜邦公司十大安全理念
- 廣聯(lián)達(dá)2024算量軟件操作步驟詳解
- 2025年新高考語文模擬考試試卷（五） （含答案解析）
- 中國共產(chǎn)主義青年團(tuán)團(tuán)章
- 普外科一科一品一特色科室活動(dòng)方案
- 蘇教版六年級(jí)數(shù)學(xué)下冊(cè)第四單元大單元教學(xué)設(shè)計(jì)
- 北師大版七年級(jí)上冊(cè)數(shù)學(xué)思維導(dǎo)圖全套
- 13《馬說》（原卷版）-2023年中考課標(biāo)文言文20篇專項(xiàng)訓(xùn)練
- 人教版三下勞動(dòng)項(xiàng)目四《蒸蛋羹》教學(xué)設(shè)計(jì)
- 質(zhì)量為綱-華為公司質(zhì)量理念與實(shí)踐
評(píng)論
0/150
提交評(píng)論