TMS 前端技术介绍.pptxVIP

TMS前端技术介绍

淘宝：玉伯

2009-06-23

Topics

页面布局：栅格系统的应用

模块开发：规范与现实的权衡

内容填充：为运营着想

辅助功能：换肤等锦上添花

栅格系统

Layout

页面宽度：960px

蛋糕切法：24×40

思考：宽屏和高分辨时代的主流宽度将是什么？1200px？

/blog/2008/10/grid-system-1/

栅格系统

Layout

技术实现：双飞翼布局

主要想法：

易用，copypaste

内容和布局的分离

按需自定义

/tbsp/tests/core/grids_layout_1.html

栅格系统

Layout

高度上的栅格化？

粒度问题，细到什么程度？

选择一：栅格决定宽度，内容决定高度

选择二：栅格控制大局，细节留给模块

页面布局

Layout

TMS实战

页面布局

Layout

QA

模块开发

Modules

页面中的最小组装单元

模块的宽度由布局确定

模块开发

Modules

基本的box盒模型

/tbra/dpl/common/box_demo.html

模块视觉规范

Modules

模块开发原则

Modules

彼此独立原则

最小影响原则

modules/2.0/modules_demo.php

CMS代码

Modules

CMS标签

Modules

Tag名称

Tag说明

Tag属性

属性说明

当前编辑方