CSS Grids

CSS Grids

Transcript

1. Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群： 1041263 新浪微薄: http://weibo.com/w3cplus E-mail: w3cplus@hotmail.com CSS Grids
2. “在巴比伦创世神话中，上帝像用粘土烧制砖头那样创造出人类。也正是人类， 将砖块砌成墙。于是最初的网格——砖墙，便 很容易与人类的身体产生关联” 一段短暂的历史 ——艺术史学家Hannah B Higgins
3. 斐波纳契螺旋数列 0,1,1,2,3,5,8,13,21,34,55,89,144... 数学公式 http://www.w3cplus.com/css/the-golden-ratio-in-web-design
4. 黄金比例数学公式 http://www.w3cplus.com/css/the-golden-ratio-in-web-design
5. 交流方式的变化 Alex Wright 宣传性 交互性 Glut: Mastering Information Through the Ages
6. 网格设计原则 网格以解决问题为首要任务，美观在其次 网格是用户体验的组成部分 网格越简单，就越有效
7. 网格设计步骤 进行调查，明确要求 画线框图 设计准备 正式设计 编写代码 基本草图 建立单元、栏、基线以及 进行计算 页面草图
8. 调查并明确限制条件 设计师 观众是谁？ 背景是什么？ 设计方案什么时候起作用？ 设计方案如何起作用？ 为什么这种方案是必要的？ 过早设 计缺点 设计出不当的单元和栏 解决了部分问题，又导致新问题 没有预见到开始不明显的问题 证明极不合格需重建网格 设计的网格制作出来证明不可用 限制 条件 技术限制 决定设计的表达方式 商业限制 决定了设计目的 内容和排版 决定了设计的内容
9. 画草图
10. 网格术语 单元格 栏 缝（间距） 区域 容器
11. 网格术语 单元格 网格的基本构成，一个单元就是页面上最 小的纵向分割区域
12. 网格术语 缝（间距） 单元格与单元格之间的间距
13. 网格术语 栏 成组的单元格合在一起
14. 网格术语 区域 相似栏的组合，形成页面的各部分
15. 网格术语 容器
16. 网格中数字 12 12是理想的一个数字，他是3和四的倍数
17. 网格中数字 12 页面分成12格，分成三栏，每栏四个网格3个间距 3 X 4 3 X 4 3 X 4
18. 网格中数字 12 页面分成12格，分成2栏，每栏6个网格5个间距 2 X 6 2 X 6
19. 网格中数字 12 页面分成12格，分成4栏，每栏3个网格2个间距 4 X 3 4 X 3 4 X 3 4 X 3
20. 网格中数字 12 页面分成12格，分成4栏，每栏3个网格2个间距 4 X 3 4 X 3 4 X 3 4 X 3
21. 网格中数字 12 页面分成12格，分成6栏，每栏2个网格1个间距 6 X 2 6 X 2 6 X 2 6 X 2 6 X 2 6 X 2
22. 网格计算 内容宽度 （场景宽度） ((总单元格数-1)X间距) 总单元格数 = 单元格宽度
23. 12网格960计算 内容宽度 （场景宽度） ((总单元格数-1)X间距) 总单元格数 = 单元格宽度 940 ((12-1)X20) 12 = 60
24. 16网格960计算 内容宽度 （场景宽度） ((总单元格数-1)X间距) 总单元格数 = 单元格宽度 950 ((16-1)X10) 16 = 50
25. 其他网格计算 内容宽度 （场景宽度） ((总单元格数-1)X间距) 总单元格数 = 单元格宽度 http://grids.heroku.com/
26. 编写代码 bootstrap为例 总容器：container 关键类名 行格：row 单元格：span* span1 span2 span3 span4 span5 span6 span7 span8 span9 span10 span11 span12
27. 编写代码 bootstrap为例 单元格宽度 940 ((12-1)X20) 12 = 60 http://www.w3cplus.com/css/bootstrap-twitter
28. 编写代码 bootstrap为例 栏宽度 .span12 : 940px （12个单元格11个间距） .span11: 860px （11个单元格10个间距） .span10 : 780px （10个单元格9个间距） .span9: 700px .span8: 620px; .span7 : 540px; .span6 : 460px; .span5 : 380px; .span4 : 300px; .span3: 220px; .span2: 140px; .span1: 60px;
29. 编写代码 bootstrap为例
30. 编写代码 bootstrap为例
31. 编写代码 bootstrap为例 https://github.com/twitter/bootstrap/b lob/master/docs/assets/css/bootstra p.css
32. 编写代码 bootstrap为例 https://github.com/twitter/bootstrap/blob/master/less/variables.less
33. 编写代码 bootstrap为例 https://github.com/twitter/bootstrap/blob/master/less/mixins.less https://github.com/twitter/bootstrap/blob/master/less/grid.less
34. 编写代码 960gs http://960.gs/ http://www.w3cplus.com/css/css-layout-with-960-grids
35. 网格系统 http://www.w3cplus.com/source/30-css-grid-system.html
36. Responsive网格系统 http://www.w3cplus.com/source/8-useful-responsive-css-frameworks.html
37. 网格系统资源 CSS布局——960gs http://www.w3cplus.com/css/css-layout-with-960-grids CSS——Bootstrap From Twitter http://www.w3cplus.com/css/bootstrap-twitter 30+ CSS Grid System http://www.w3cplus.com/source/30-css-grid-system.html 8个实用的响应式设计框架 http://www.w3cplus.com/source/8-useful-responsive-css- frameworks.html 16个优秀的Responsive CSS框架 http://www.w3cplus.com/source/16-responsive-css- frameworks-worth-considering.html
38. 网格制作工具 http://www.w3cplus.com/source/front-end-developer-excellent-tool.html
39. 问与答
40. Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群： 1041263 新浪微薄: http://weibo.com/w3cplus E-mail: w3cplus@hotmail.com 谢谢！