淘宝高级SDK模板制作08domcss.ppt

第08课domcss编写规范 页面结构区块 片区 坑 模块布局 淘宝导航栏淘宝页头淘宝页尾 开放的区域 设计师设计的是不完整页面 开放给设计师的页面区域在这个标签内 命名空间 该设计区域的CSS样式有命名空间限制 需要以 tb shop为namespace 命名空间 的名称 tb shop系统会自动给加上的 不建议开发者自己添加以 tb shop开头的样式 CSS选择器规范 设计师不能添加id选择器 如 是不允许的 不允许以tb 开头 tb shop除外 tb 开头的样式是淘宝class名保留词 除了 J TBox和 J TRegion以外 其它选择器只能包含小写字母 a z 数字 0 9 点 下划线 横线 冒号 css文件中选择器的属性及其值都支持大小写 淘宝页头说明 店铺页头 页面中开放给设计师设计的店铺自己的页头 在简易模板中 C旺铺和商城对首页的店铺页头高度没有限制 但列表页和详情页仍然会有高度的限制 商城支持的最大高度为150px C旺铺支持的最大高度为250px 如果想设计的模板页头内容能在商城及C旺铺的所有页面通用 就最好把页头的内容控制在150px之内 商城列表页要支持250px 区块 片区 坑 说明 CSS规范 class main wrapJ TRegion 中 J TRegion是设计区域时必须添加的样式 其他的样式名如 main wrap 是设计师可以自己添加的样式 一个区块内可以添加多个模块 区块 片区 坑 模块 说明 CSS规范 class boxJ TBox 中 J TBox是设计模块时必须添加的样式名 其他的样式名如 box 是设计师可以自己添加的样式 自定义样式 box 中的内容建议不要涉及float position等这样对模块的位置进行定义的样式建议不要用table来充当模块 否则效果将不明显或报错 模块 官方对于模块dom结构的建议 绿色框里面的内容是模块本身的内容 建议 在模块内容和模块div标签本身再添加一层div 如红色框所示 模块 模块 模块 模块 模块 说明 1 淘宝店铺有系统布局设计师在设计简易模板的时候 只能通过布局管理添加系统支持的布局 2 设计师在设计sdk模板的时候 设计师可以设计自己的布局 系统对sdk模板的布局没有作任何限制 此时设计师可以参考系统布局设计自己的布局结构 也可以使用系统布局 然后覆盖系统的布局样式 设计自己的布局样式 布局 布局 淘宝的六种系统布局 布局 命名规则 通栏布局 grid m 两栏布局 grid sXm0 三栏布局 grid sXm0eY 系统布局的样式在这个样式文件中 命名含义如下 当单元列的宽度为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 extra width 50px margin left 50px 通栏和两栏 左右栏 说明 上层为