布局原理

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

More Related Content