43DOMCSS规范.docx

资源ID：18511283 资源大小：400.07KB 全文页数：22页
资源格式： DOCX 下载积分：6金币

快捷下载

账号登录下载

微信登录下载

三方登录下载：

微信扫一扫登录

下载资源需要6金币

邮箱/手机：
温馨提示：	快捷下载时，用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）。如填写123，账号就是123，密码也是123。
支付方式：
验证码：	换一换

加入VIP,免费下载

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

43DOMCSS规范.docx

1、43DOMCSS规范DOM、CSS规范1页面结构页面整体图示：对应的html结构：说明： 1.1开放的区域:设计师设计的是不完整页面，开放给设计师的页面区域在这个标签内，对应上图的蓝色区域。 1.2命名空间：，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。 1.3 CSS选择器规范:命名规范设计师不能添加id选择器；比如#box 将被过滤。选择器不能使用.tb,.tb-shop 官方保留选择器; 除了.J_TBox和.J_TRegion以外，其它选择器

2、只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:) css 文件中选择器的属性及其值都支持大小写。支持的伪类:first-child :link :visited :hover :active :focus 支持的伪元素:first-letter :first-line :before :after 1.4 特殊属性规则:margin属性- Margin取值 SDK 支持负数值内店自定义内容区不支持负数值外店自定义内容区不支持负数值完全自定义css 支持负数值 position属性- position取值 SDK absolute | fixe

3、d | relative | static 内店自定义内容区 static 外店自定义内容区 static 完全自定义css absolute | fixed | relative | static 1.5 淘宝页头说明L:店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150px;C旺铺支持的最大高度为250px; 如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250px;例：商城宝贝详情页店招部分的样式.ark

4、.shop-banner max-height: 150px; overflow: hidden; position: relative; 2区块（片区、坑） 1.区块html结构示意图：说明： 1. CSS规范：class=main-wrap J_TRegion 中，J_TRegion是设计区域时必须添加的样式，其他的样式名如” main-wrap”是设计师可以自己添加的样式； 2. 一个区块内可以添加多个模块。 2.区块示例 1. 页面显示： 2. Dom结构: 3模块说明： 1.CSS规范：class=box J_TBox 中，J_TBox是设计模块时必须添加的样式名，其他的样式名如

5、”box”是设计师可以自己添加的样式。 2.自定义样式.box中的内容建议不要涉及float、position等这样对模块的位置进行定义的样式。3.建议不要用table来充当模块，否则效果将不明显或报错。4.dom结构建议，如下图所示：绿色框里面的内容是模块本身的内容，建议：在模块内容和模块div标签本身再添加一层div，如红色框所示5.系统模块的样式可以通过如下地址访问可以看到模块示例: 1.自动分类模块页面显示：页面代码： 2.搜索模块页面显示：页面代码： 3.宝贝排行榜页面显示：页面代码： 4. 搜索列表页页面显示：页面代码： 4布局说明： 1.淘宝店铺有系统布局 2

6、.设计师在设计简易模板的时候，只能通过布局管理添加系统支持的布局。 3.设计师在设计sdk模板的时候，设计师可以设计自己的布局，系统对sdk模板的布局没有作任何限制。此时设计师可以参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。淘宝系统布局系统提供的布局结构如下，总共有6种：命名规则： 1通栏布局（.grid-m） 2两栏布局（.grid-sXm0） 3三栏布局（.grid-sXm0eY）系统布局的样式在这个样式文件中命名含义如下： 1.当单元列的宽度为 40px 的倍数时， sX 表示 col-sub 的宽度 = X * 40 - 10,

7、 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 width: 190px; margin-left: -190

8、px; .grid-e6m0s5 .col-extra width: 230px; margin-left: -100%; 2.当单元列的宽度不为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%;

9、 .grid-s120m0e50 .col-extra width: 50px; margin-left: -50px; 自定义布局示例： 1.通栏和两栏（左右栏）说明：上层为通栏，下层为两栏（左右栏）页面显示：页面代码： 2.三栏布局说明：总体分为两栏（左右栏）：绿色框为左侧栏，红色框为主栏，红色框主栏又分为左右两栏，黑色框部分页面显示：页面代码： 5 CSS白名单基本样式属性取值 background-attachment scroll | fixed background-clip border-box | padding-box | content-box | no-cl

29、s int border-collapse separate | collapse border-spacing length length caption-side top | bottom empty-cells hide | show resize none | both | horizontal | vertical table-layout automatic | fixed zoom normal | number | percentage opacity number 6扩展样式属性取值 border-radius 1,4 / -moz-border-radius 同border-radius -webkit-border-radius 同border-radius border-top-left-radius | ? border-top-right-radius 同border-top-left-radius border-bottom-right-radius 同border-top-left-radius border-bottom-left-radius

注意事项

本文（43DOMCSS规范.docx）为本站会员主动上传，冰点文库仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知冰点文库（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。