淘宝高级SDK模板制作08domcss_第1页
淘宝高级SDK模板制作08domcss_第2页
淘宝高级SDK模板制作08domcss_第3页
淘宝高级SDK模板制作08domcss_第4页
淘宝高级SDK模板制作08domcss_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第08课domcss编写规范页面结构区块（片区、坑）模块布局<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>开放的区域:

设计师设计的是不完整页面，开放给设计师的页面区域在

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

这个标签内。命名空间：

<divid="content"class="tb-shop"></div>，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。

CSS选择器规范:

设计师不能添加id选择器；如<divid=“XXX”></div>,是不允许的。

不允许以tb-开头（tb-shop除外，tb-开头的样式是淘宝class名保留词）;

除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)

css文件中选择器的属性及其值都支持大小写。

淘宝页头说明:

店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150px;C旺铺支持的最大高度为250px;如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250px;

<!--布局-->

<divclass="main-wrapJ_TRegion">

<!--区块-->

<!--这里只能是模块,可以有多个模块-->

<divclass="boxJ_TBox"></div>

<!--模块内容-->

</div>

</div>区块(片区、坑)说明：

CSS规范：class=“main-wrapJ_TRegion”中，J_TRegion是设计区域时必须添加的样式，其他的样式名如”main-wrap”是设计师可以自己添加的样式；

一个区块内可以添加多个模块。

区块(片区、坑)<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”>

<!—这里是模块内容-->

</div>模块说明：

CSS规范：class=“boxJ_TBox”中，J_TBox是设计模块时必须添加的样式名，其他的样式名如”box”是设计师可以自己添加的样式。

自定义样式.box{……}中的内容建议不要涉及float、position等这样对模块的位置进行定义的样式

建议不要用table来充当模块，否则效果将不明显或报错

模块官方对于模块dom结构的建议：绿色框里面的内容是模块本身的内容，建议：在模块内容和模块div标签本身再添加一层div，如红色框所示。模块模块模块模块模块说明：

1、淘宝店铺有系统布局

设计师在设计简易模板的时候，只能通过布局管理添加系统支持的布局。

2、设计师在设计sdk模板的时候，设计师可以设计自己的布局，系统对sdk模板的布局没有作任何限制。此时设计师可以参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。

布局布局淘宝的六种系统布局布局命名规则：

通栏布局（.grid-m）

两栏布局（.grid-sXm0）

三栏布局（.grid-sXm0eY）

系统布局的样式在这个样式文件中/p/tshop/base.css

命名含义如下：

当单元列的宽度为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的倍数时，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-

人人文库> 全部分类> 专业文献 > 生活休闲

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论