新员工培训，淘宝布局原理

1. Grid.css 原理
拔赤 bachi@taobao.com
http://www.uedagazine.com
2010-08-24

2. • Reset.css – 样式重置
• Grid.css – 栅格
• Font.css – 字体
• Common.css – 容器、icon等

3. Reset.css

4. 栅格？

5. 工整的书写？

6. 报纸版面

7. 工整的栅格化排版

8. Web Page也需要栅格？

9. 内容增多，需要栅格

10. Yahoo! 950 栅格系统

11. 熟悉的960宽度
http://960.gs/demo.html

12. 淘宝栅格原型

13. 淘宝栅格系统对照表

14. 如何实现？

15. • 渐进增强
– 一套html，多套css
• 布局灵活
– 2栏、3栏、4栏…
• 主容器宽度自适应

16. 圣杯 vs 双飞翼

17. http://www.alistapart.com/articles/holygrail
圣杯布局

22. http://blog.html.it/layoutgala/
双飞翼布局

26. Grids for Taobao

27. http://kissy.googlecode.com/svn/trunk/src/cssgrids/grids-taobao.html
淘宝主站常用布局

28. http://cubee.github.com/src/css/demo/grid.html
淘宝DPD常用布局

29. Q&A