DOM、CSS规范.docx

DOM、CSS规范出自淘宝网店铺开发者WIKI跳转到： 导航, 搜索目录隐藏 1 页面结构o 1.1 开放的区域:o 1.2 命名空间：o 1.3 CSS选择器规范:o 1.4 特殊属性规则:o 1.5 淘宝页头说明L: 2 区块（片区、坑） 3 模块 4 布局 5 CSS白名单 6 扩展样式 7 CSS hack页面结构 页面整体图示：对应的html结构：说明：1. 开放的区域:设计师设计的是不完整页面，开放给设计师的页面区域在这个标签内，对应上图的蓝色区域。2. 命名空间：，该设计区域的CSS样式有命名空间限制，需要以.tb-shop为namespace(命名空间)的名称。.tb-shop系统会自动给加上的，不建议开发者自己添加以.tb-shop开头的样式。3. CSS选择器规范:命名规范o 设计师不能添加id选择器；比如#box 将被过滤。o 选择器不能使用.tb,.tb-shop 官方保留选择器; o 除了.J_TBox和.J_TRegion以外，其它选择器只能包含小写字母(a-z),数字(0-9),点(.),下划线(_),横线(-),冒号(:)o css 文件中选择器的属性及其值都支持大小写。支持的伪类o :first-childo :linko :visitedo :hovero :activeo :focus 支持的伪元素o :first-lettero :first-lineo :beforeo :after4. 特殊属性规则:margin属性-Margin取值SDK支持负数值内店自定义内容区不支持负数值外店自定义内容区不支持负数值完全自定义css支持负数值position属性-position取值SDKabsolute | fixed | relative | static内店自定义内容区static外店自定义内容区static完全自定义cssabsolute | fixed | relative | static淘宝页头说明L:店铺页头：页面中开放给设计师设计的店铺自己的页头。在简易模板中：C旺铺和商城对首页的店铺页头高度没有限制，但列表页和详情页仍然会有高度的限制。商城支持的最大高度为150px;C旺铺支持的最大高度为250px; 如果想设计的模板页头内容能在商城及C旺铺的所有页面通用，就最好把页头的内容控制在150px之内。商城列表页要支持250px;例：商城宝贝详情页店招部分的样式.ark .shop-banner max-height: 150px; overflow: hidden; position: relative;区块（片区、坑） 1. 区块html结构示意图：说明：1. CSS规范：class=main-wrap J_TRegion 中，J_TRegion是设计区域时必须添加的样式，其他的样式名如” main-wrap”是设计师可以自己添加的样式；2. 一个区块内可以添加多个模块。2. 区块示例o 页面显示：o Dom结构 :模块 说明：1. CSS规范：class=box J_TBox 中，J_TBox是设计模块时必须添加的样式名，其他的样式名如”box”是设计师可以自己添加的样式。2. 自定义样式.box中的内容建议不要涉及float、position等这样对模块的位置进行定义的样式3. 建议不要用table来充当模块，否则效果将不明显或报错4. dom结构建议，如下图所示：绿色框里面的内容是模块本身的内容，建议：在模块内容和模块div标签本身再添加一层div，如红色框所示。5. 系统模块的样式可以通过如下地址访问可以看到 /p/shop/1.0/mods/s/shop-mods-min.css模块示例:1. 自动分类模块 页面显示： 页面代码：2. 搜索模块 页面显示： 页面代码：3. 宝贝排行榜 页面显示： 页面代码：4. 搜索列表页 页面显示： 页面代码：布局 说明：5. 淘宝店铺有系统布局6. 设计师在设计简易模板的时候，只能通过布局管理添加系统支持的布局。7. 设计师在设计sdk模板的时候，设计师可以设计自己的布局，系统对sdk模板的布局没有作任何限制。此时设计师可以参考系统布局设计自己的布局结构，也可以使用系统布局，然后覆盖系统的布局样式，设计自己的布局样式。淘宝系统布局系统提供的布局结构如下，总共有6种：命名规则：8. 通栏布局（.grid-m）9. 两栏布局（.grid-sXm0）10. 三栏布局（.grid-sXm0eY）系统布局的样式在这个样式文件中/p/tshop/base.css命名含义如下：1. 当单元列的宽度为 40px 的倍数时， sX 表示 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 width: 190px; margin-left: -190px; .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%; .grid-s120m0e50 .col-extra width: 50px; margin-left: -50px; 自定义布局示例：3. 通栏和两栏（左右栏）说明：上层为通栏，下层为两栏（左右栏）页面显示：页面代码：4. 三栏布局说明：总体分为两栏（左右栏）：绿色框为左侧栏，红色框为主栏，红色框主栏又分为左右两栏，黑色框部分页面显示：页面代码：CSS白名单 基本样式属性取值background-attachmentscroll | fixedbackground-clipborder-box | padding-box | content-box | no-clipbackground-colorcolorbackground-imagenone | urlbackground-originborder | padding | contentbackground-positionleft | center | right | top | center | bottom | length | percentagebackground-repeatrepeat | repeat-x | repeat-y | no-repeatboarderborder-width | border-style | border-colorborder-bottomborder-bottom-width | border-bottom-style | border-bottom-colorborder-bottom-colorcolor | transparentborder-bottom-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-bottom-widththin | medium | thick | lengthborder-colorcolor | transparentborder-leftborder-left-width | border-left-style | border-left-colorborder-left-colorcolor | transparentborder-left-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-left-widththin | medium | thick | lengthborder-rightborder-right-width | border-right-style | border-right-colorborder-right-colorcolor | transparentborder-right-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-right-widththin | medium | thick | lengthborder-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-topborder-top-width border-top-style border-top-colorborder-top-colorColor | transparentborder-top-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetborder-top-widththin | medium | thick | lengthborder-widthborder-top-width | border-right-width | border-bottom-width | border-left-widthbox-sizingcontent-box | border-boxoutlineoutline-color | outline-style | outline-widthoutline-colorcolor | invertoutline-offsetlengthoutline-stylenone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetoutline-widththin | medium | thick | lengthcoloraqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | orange | purple | red | silver | teal | white | yellowTransparenthex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000，只有3位和6位）;rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)，0到255）directionltr | rtlletter-spacingnormal | lengthline-heightnormal | length | number | percentagetext-alignleft | right | center | justifytext-decorationnone | underline | overline | line-through | blinktext-indentlength | percentagetext-overflowclip | ellipsistext-shadowcolor | length | length | opacitytext-transformnone | capitalize | uppercase | lowercaseunicode-bidinormal | embed | bidi-overridewhite-spacenormal | pre | nowrap | pre-wrap | pre-lineword-spacingnormal | lengthword-breaknormal | break-all | keep-allword-wrapnormal | break-wordwriting-modelr-tb | tb-rlfontfont-style font-variant font-weight font-size/line-height font-familyfont-familyArial | Arial Narrow | Book Antiqua | Candara | Courier | Courier New | Helvetica | Monospace | Sans-Serif | Serif | Simsun | Tahoma | Verdana | 宋体 | 幼圆 | 新宋体 | 隶书 | 黑体| 微软雅黑 | 华文楷体 | 华文行楷font-sizexx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | percentagefont-size-adjustnone | numberfont-stretchnormal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expandedfont-stylenormal | italic | obliquefont-variantnormal | small-capsfont-weightnormal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expandedmarginauto | length | percentagemargin-bottomauto | length | percentagemargin-leftauto | length | percentagemargin-rightauto | length | percentagemargin-topauto | length | percentagepaddinglength | percentagepadding-bottomlength | percentagepadding-leftlength | percentagepadding-rightlength | percentagepadding-toplength | percentagelist-stylelist-style-typenone | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-irohalist-style-positioninside | outsidelist-style-imagenone | urlmarker-offsetauto | lengthcontent仅支持空串和20counter-increment仅支持空串和20counter-resetl仅支持空串和20heightauto | length | percentagemax-heightauto | length | percentagemax-widthauto | length | percentagemin-heightlength | percentagemin-widthlength | percentagewidthauto | length | percentagebottomauto | length | percentageclearleft | right | both | noneclipauto | rect (top, right, bottom, left)cursordefault | auto | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progressdisplaynone | block | inline | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-captionfloatleft | right | noneleftauto | length | percentageopacitylengthoverflowvisible | hidden | scroll | autooverflow-xvisible | hidden | scroll | autooverflow-yvisible | hidden | scroll | autopositionabsolute | fixed | relative | staticrightauto | length | percentagetopauto | length | percentagevertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | length | percentagevisibilityvisible | hidden | collapsez-indexauto | intorphansIntpage-break-afterauto | always | avoid | left | rightpage-break-beforeauto | always | avoid | left | rightpage-break-insideauto | avoidwidowsintborder-collapseseparate | collapseborder-spacinglength lengthcaption-sidetop | bottomempty-cellshide | showresizenone | both | horizontal | verticaltable-layoutautomatic | fixedzoomnormal | number | percentageopacitynumber扩展样式 属性取值border-radius 1,4 /-moz-border-radius同border-radius-webkit-border-radius同border-radiusborder-top-left-radius | ?border-top-right-radius同border-top-left-radiusborder-bottom-right-radius同border-top-left-radiusborder-bottom-left-radius同border-top-left-radius-webkit-border-top-left-radius | ?-webkit-border-top-right-radius同border-top-left-radius m-color-webkit-border-bottom-left-radius同border-top-left-radius-moz-border-top-left-radius | ?-moz-border-top-right-radius同border-top-left-radius-moz-border-bottom-right-radius同border-top-left-radius-moz-border-bottom-left-radius同border-top-left-radius-moz-transition同transition-moz-transition-property同transition-property-moz-transition-duration同transition-timing-function-moz-transition-timing-function同transition-timing-function-moz-transition-delay同transition-delay-webkit-transition同transition-moz-transition-property同transition-property-moz-transition-duration同transition-duration-moz-transition-timing-function同transition-timing-function-moz-transition-delay同transition-delay-webkit-transition同transition-webkit-transition-property同transition-property-webkit-transition-duration同transition-duration-webkit-transition-timing-function同transition-timing-function-webkit-transition-delay同transition-delay-o-transition同transition-o-transition-property同transition-property-o-transition-duration同transition-duration-o-transition-timing-function同transition-timing-function-o-transition-delay同transition-delaybox-shadow ,*where is defined as: inset? & ? ? ? -moz-box-shadow同box-shadow-webkit-box-shadow t同box-shad