淘宝装修平台：模块化DOM CSS编码与命名空间规范详解

5星 · 超过95%的资源需积分: 9 98 浏览量更新于2024-07-26 2 收藏 534KB PPT 举报

淘宝装修平台模板开发流程主要关注于HTML结构和CSS编码规范，以确保在淘宝SDK中创建的专业页面具有统一的风格和可维护性。以下将详细介绍关键知识点： 1. **页面结构**：在淘宝装修平台模板开发中，页面结构通常遵循一个清晰的层次关系。HTML的`<body>`标签内包含了主要的区域，如`<div id="site-nav">淘宝导航栏</div>`和`<div id="header">淘宝页头</div>`，这些都是页面的基本组成部分。 2. **区块与区域划分**：页面被划分为不同的区块或"坑"（可能是设计术语），例如`<div id="content"class="tb-shop">`中的"tb-shop"区域，这是设计师可以自由设计的部分，其余的固定区域如头部和尾部（`<div id="header">`和`<div id="footer">`）由系统自动生成。 3. **模块与布局**：在开放给设计师的`<div id="content"class="tb-shop">`区域，CSS布局通过`.layoutgrid-xxxx`类进行管理。`.main-wrapJ_TRegion`是布局容器，用于组织模块。设计师可以创建多个`<div class="boxJ_TBox">`模块，每个模块都代表独立的内容单元，这些模块是可定制的，并且可以通过CSS控制其样式和位置。 4. **命名空间与CSS选择器**： CSS样式需要遵循特定的命名空间规则，即`.tb-shop`作为命名空间，设计师不应自行添加以`.tb-shop`开头的样式。这有助于避免样式冲突和保持代码整洁。ID选择器和以`tb-`开头的选择器是禁止使用的，除了保留的`tb-shop`和特定的类名（如`.J_TBox`和`.J_TRegion`）。 5. **CSS选择器规范**：为了兼容性和一致性，CSS选择器必须遵循严格的规则：只允许小写字母、数字、点、下划线、横线和冒号。设计师在编写选择器时需要特别注意这一点，确保样式符合淘宝SDK的要求。 6. **淘宝页头设计**：店铺页头是页面的重要部分，不同场景（如首页、列表页和详情页）有不同的高度限制。在C旺铺中，首页店头高度无限制，但在其他页面上，最大高度为250px；而在商城中，最大高度限制为150px。设计师需了解这些限制，以便在设计时合理规划布局。淘宝装修平台模板开发流程强调了结构清晰、命名规范、以及对平台特有CSS规则的遵循，以确保模板的可复用性和兼容性。设计师在实际操作中应严格按照上述标准来编写代码，以确保最终的模板质量和用户体验。

CSS 选择器规范 :

设计师不能添加 id 选择器；如 <div

id=“XXX”></div>, 是不允许的。

不允许以 tb- 开头（ tb-shop 除外， tb- 开头的样式

是淘宝 class 名保留词） ;

除了 .J_TBox 和 .J_TRegion 以外，其它选择器只

能包含小写字母 (a-z), 数字 (0-9), 点 (.), 下划线 (_), 横线

(-), 冒号 (:)

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

剩余26页未读，继续阅读

大头女儿

粉丝: 0
资源: 1

淘宝装修平台：模块化DOM CSS编码与命名空间规范详解

淘宝装修、SDK高级模板开发流程详解.rar

淘宝SDK高级模板开发流程 淘宝装修服务设计师必备

淘宝装修首页模板yuan代码

aspice软件开发流程各文档模板

技术charter开发流程模板

开发规范模板 doc

软件开发文档模板word

软件开发文档模板(全套) csdn

敏捷开发 过程文档模板csdn

开发提测模板.xlsx

最新资源

淘宝SDK高级模板开发流程淘宝装修服务设计师必备

敏捷开发过程文档模板csdn