版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第08课domcss编写规范页面结构区块（片区、坑）模块布局第08课domcss编写规范页面结构1淘宝高级SDK模板制作08domcss2<html> <head> </head> <body> <divid="site-nav">淘宝导航栏</div> <divid="header">淘宝页头</div> <divid="content"class="tb-shop"> <divid="hd"><!--店铺页头--></div> <divid="bd"> <!--店铺内容--> <divclass="layoutgrid-xxxx"> <!--布局--> <divclass="main-wrapJ_TRegion"> <!--区块--> <!--这里只能是模块,可以有多个模块--> <divclass="boxJ_TBox"></div> <!--模块内容--> </div> </div> </div> </div> <divid="ft"><!--店铺页尾--></div> </div> <divid-"footer">淘宝页尾</div> </body></html><html>3开放的区域:
设计师设计的是不完整页面，开放给设计师的页面区域在
<divid="content"class="tb-shop"></div>
这个标签内。开放的区域:
设计师设计的是不完整页面，开放给4命名空间：
<divid="content"class="tb-shop"></div>，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。
命名空间：
<divid="content"class=5CSS选择器规范:
设计师不能添加id选择器；如<divid=“XXX”></div>,是不允许的。
不允许以tb-开头（tb-shop除外，tb-开头的样式是淘宝class名保留词）;
除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)
css文件中选择器的属性及其值都支持大小写。
CSS选择器规范:
设计师不能添加id选择器6淘宝页头说明:
店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150px;C旺铺支持的最大高度为250px;如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250px;
淘宝页头说明:
店铺页头：页面中开放给设计师设7<!--布局-->
<divclass="main-wrapJ_TRegion">
<!--区块-->
<!--这里只能是模块,可以有多个模块-->
<divclass="boxJ_TBox"></div>
<!--模块内容-->
</div>
</div>区块(片区、坑)<!--布局-->
<divclass="main-wra8说明：
CSS规范：class=“main-wrapJ_TRegion”中，J_TRegion是设计区域时必须添加的样式，其他的样式名如”main-wrap”是设计师可以自己添加的样式；
一个区块内可以添加多个模块。
区块(片区、坑)说明：
CSS规范：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”>
<!—这里是模块内容-->
</div>模块<divclass=“boxJ_TBox”>
11说明：
CSS规范：class=“boxJ_TBox”中，J_TBox是设计模块时必须添加的样式名，其他的样式名如”box”是设计师可以自己添加的样式。
自定义样式.box{……}中的内容建议不要涉及float、position等这样对模块的位置进行定义的样式
建议不要用table来充当模块，否则效果将不明显或报错
模块说明：
CSS规范：class=“box12官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内容，建议：在模块内容和模块div标签本身再添加一层div，如红色框所示。模块官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内13模块模块14模块模块15模块模块16模块模块17说明：
1、淘宝店铺有系统布局
设计师在设计简易模板的时候，只能通过布局管理添加系统支持的布局。
2、设计师在设计sdk模板的时候，设计师可以设计自己的布局，系统对sdk模板的布局没有作任何限制。此时设计师可以参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。
布局说明：
1、淘宝店铺有系统布局
设计师在设18布局淘宝的六种系统布局布局淘宝的六种系统布局19布局命名规则：
通栏布局（.grid-m）
两栏布局（.grid-sXm0）
三栏布局（.grid-sXm0eY）
系统布局的样式在这个样式文件中/p/tshop/base.css
布局命名规则：
通栏布局（.grid-m）
两栏布局（.gr20命名含义如下：
当单元列的宽度为40px的倍数时，
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).
对应的样式为：
.grid-e6m0s5.main-wrap{margin:0200px0240px;}
.grid-e6m0s5.col-sub{width:190px;margin-left:-190px;}
.grid-e6m0s5.col-extra{width:230px;margin-left:-100%;}
命名含义如下：
当单元列的宽度为40px的倍数时，
21当单元列的宽度不为40px的倍数时，sX和eY中的X和Y直接表示宽度
比如：总宽为950px时，.grid-s120m0e50表示col-sub(120)|col-main(760)|col-extra(50),
对应的样式为：
.grid-s120m0e50.main-wrap{margin:0130px060px;}
.grid-s120m0e50.col-sub{width:120px;margin-left:-100%;}
.grid-s120m0e50.col-extra{width:50px;margin-left:-50px;}当单元列的宽度不为40px的倍数时，sX和eY中的X和22通栏和两栏（左右栏）
说明：上层为通栏，下层为两栏（左右栏）
页面显示：通栏和两栏（左右栏）
说明：上层为通栏，下层为两栏（左右栏23页面代码：页面代码：24三栏布局说明：总体分为两栏（左右栏）：绿色框为左侧栏，红色框为主栏，红色框主栏又分为左右两栏，黑色框部分
页面显示：三栏布局说明：总体分为两栏（左右栏）：绿色框为左侧栏，红色25页面代码：页面代码：26感谢您的关注!感谢您的关注!27第08课domcss编写规范页面结构区块（片区、坑）模块布局第08课domcss编写规范页面结构28淘宝高级SDK模板制作08domcss29<html> <head> </head> <body> <divid="site-nav">淘宝导航栏</div> <divid="header">淘宝页头</div> <divid="content"class="tb-shop"> <divid="hd"><!--店铺页头--></div> <divid="bd"> <!--店铺内容--> <divclass="layoutgrid-xxxx"> <!--布局--> <divclass="main-wrapJ_TRegion"> <!--区块--> <!--这里只能是模块,可以有多个模块--> <divclass="boxJ_TBox"></div> <!--模块内容--> </div> </div> </div> </div> <divid="ft"><!--店铺页尾--></div> </div> <divid-"footer">淘宝页尾</div> </body></html><html>30开放的区域:
设计师设计的是不完整页面，开放给设计师的页面区域在
<divid="content"class="tb-shop"></div>
这个标签内。开放的区域:
设计师设计的是不完整页面，开放给31命名空间：
<divid="content"class="tb-shop"></div>，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。
命名空间：
<divid="content"class=32CSS选择器规范:
设计师不能添加id选择器；如<divid=“XXX”></div>,是不允许的。
不允许以tb-开头（tb-shop除外，tb-开头的样式是淘宝class名保留词）;
除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)
css文件中选择器的属性及其值都支持大小写。
CSS选择器规范:
设计师不能添加id选择器33淘宝页头说明:
店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150px;C旺铺支持的最大高度为250px;如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250px;
淘宝页头说明:
店铺页头：页面中开放给设计师设34<!--布局-->
<divclass="main-wrapJ_TRegion">
<!--区块-->
<!--这里只能是模块,可以有多个模块-->
<divclass="boxJ_TBox"></div>
<!--模块内容-->
</div>
</div>区块(片区、坑)<!--布局-->
<divclass="main-wra35说明：
CSS规范：class=“main-wrapJ_TRegion”中，J_TRegion是设计区域时必须添加的样式，其他的样式名如”main-wrap”是设计师可以自己添加的样式；
一个区块内可以添加多个模块。
区块(片区、坑)说明：
CSS规范：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”>
<!—这里是模块内容-->
</div>模块<divclass=“boxJ_TBox”>
38说明：
CSS规范：class=“boxJ_TBox”中，J_TBox是设计模块时必须添加的样式名，其他的样式名如”box”是设计师可以自己添加的样式。
自定义样式.box{……}中的内容建议不要涉及float、position等这样对模块的位置进行定义的样式
建议不要用table来充当模块，否则效果将不明显或报错
模块说明：
CSS规范：class=“box39官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内容，建议：在模块内容和模块div标签本身再添加一层div，如红色框所示。模块官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内40模块模块41模块模块42模块模块43模块模块44说明：
1、淘宝店铺有系统布局
设计师在设计简易模板的时候，只能通过布局管理添加系统支持的布局。
2、设计师在设计sdk模板的时候，设计师可以设计自己的布局，系统对sdk模板的布局没有作任何限制。此时设计师可以参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。
布局说明：
1、淘宝店铺有系统布局
设计师在设45布局淘宝的六种系统布局布局淘宝的六种系统布局46布局命名规则：
通栏布局（.grid-m）
两栏布局（.grid-sXm0）
三栏布局（.grid-sXm0eY）
系统布局的样式在这个样式文件中/p/tshop/base.css
布局命名规则：
通栏布局（.grid-m）
两栏布局（.gr47命名含义如下：
当单元列的宽度为40px的倍数时，
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(1
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 消费者行为学学习通超星期末考试答案章节答案2024年
- 2024年非接触式温度计项目建议书
- 2024年紫外光固化油墨项目发展计划
- 班级人际关系的维护策略计划
- 烟雾中毒应急处理培训
- 年度工作计划中的可持续发展
- 2025届江苏省江阴市四校高三年级十二月份阶段测试化学试题试卷含解析
- 员工三级安全教育培训试题(有答案)
- 2022年下半年全国自考刑法学模拟考题含解析
- 阀门 法兰连接铁制闸阀 编制说明
- 6.1 友谊的真谛 课件-2024-2025学年统编版道德与法治七年级上册 -1
- 三年级下学期信息技术第09课制作宣传海报课件
- Unit4MyfavoriteSubjectSectionA1a-1d课件人教版英语七年级上册
- 2024年9月嘉兴市2025届高三基础测试 英语试题（含答案）
- 2024年国家公务员考试行测真题及答案(完整版)
- 污水处理及中水回用工程可行性研究报告书
- 2023年中国医药集团有限公司总部招聘考试真题及答案
- 质量为纲-华为公司质量理念与实践
- 2024年第五届全国大学生职业发展大赛初赛线上答题考试题库（含答案）
- 大一统王朝的巩固（课件） 2024-2025学年七年级历史上册同步教学课件（统编版2024）
- 政法系统领导干部专题读书班学习心得体会范文（三篇）
评论
0/150
提交评论