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

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

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

4、塊.模塊.闡明： 1、淘寶店鋪有系統規劃 設計師在設計簡易模板的時候，只能經過規劃管理添加系統支持的規劃。 2、設計師在設計sdk模板的時候，設計師可以設計本人的規劃，系統對sdk模板的規劃沒有作任何限制。此時設計師可以參考系統規劃設計本人的規劃構造，也可以運用系統規劃，然后覆蓋系統的規劃款式，設計本人的規劃款式。規劃.規劃淘寶的六種系統規劃.規劃命名規那么：通欄規劃.grid-m兩欄規劃.grid-sXm0三欄規劃.grid-sXm0eY 系統規劃的款式在這個款式文件中httpa.tbcdn/p/tshop/base.css.命名含義如下： 當單元列的寬度為 40px 的倍數時， 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的倍數時， 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; .通欄和兩欄左右欄 闡明：上