Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Grids

w3cplus
January 11, 2013

CSS Grids

CSS Grids

w3cplus

January 11, 2013
Tweet

More Decks by w3cplus

Other Decks in Technology

Transcript

  1. 调查并明确限制条件 设计师 观众是谁? 背景是什么? 设计方案什么时候起作用? 设计方案如何起作用? 为什么这种方案是必要的? 过早设 计缺点 设计出不当的单元和栏

    解决了部分问题,又导致新问题 没有预见到开始不明显的问题 证明极不合格需重建网格 设计的网格制作出来证明不可用 限制 条件 技术限制 决定设计的表达方式 商业限制 决定了设计目的 内容和排版 决定了设计的内容
  2. 编写代码 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;
  3. 网格系统资源 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