960 Grid System 简明使用教程

960 Grid System(960gs)是一个为了简化webUI设计工作流程而出现的宽度为960像素的工具。它包含两个版本,12列和16列,这两个版本可以单独使用也可以放一起使用。

960gs样式说明:

container_x:容器样式,x列
grid_x:每列宽度
alpha:用于清除左边10px的marginomega:用于清除右边10px的margin
prefix_xx:左补空
suffix_xx:右补空
clear或<hr/>:重新开始(官方在使用hr)
push_x:左偏移
pull_x:右偏移

容器里的列,样式名以grid_列宽 命名,如grid_1是一列,grid_5是5列,以此类推。

diagram of various grids within a container

    如图,样式名为container_12的容器包含三个格栅,每个格栅会包含不同的页面元素。

    在使用时,只用够用的格栅,如果您的页面只用到一个12列的格栅,只需要一个grid_5和一个grid_7,那其他多余的样式就可以删除了。

    样式.container_x和.grid_x不限于<div>元素,这两个样式可以用到除html、 head、 meta、 param、 script、 title、style外的所有标签上。

     所以<body>中的任何标签都可以用。如果一对<div>中只有一个html元素,那这个<div>就不需要,直接将样式设置在这个html元素上即可。

     可以不用div的情景:

 960 Grid System 简明使用教程

  • 复制Grid属性到某些元素

 简单的css样式,.grid_x有可以与其他样式或元素共同使用的元素,通过拷贝这些属性,就省去写新的样式,如

.examples li { (properties of .grid_4) }
…
…


下面是效果: 
 

另一个例子:

.photos p { (properties of .grid_10) }
.photos img { (properties of .grid_6) }
<div class="container_16 photos">
  <img src="…" alt="photo" />
  <p>First caption</p>
  <img src="…" alt="photo" />
  <p>Another caption</p>
</div>

效果: 

自动指定图片的宽为10个格栅,段落文字则为6个格栅:

photo and caption on a grid with minimal HTML

当<table>元素不方便使用时,表格效果就很方便做出来:

.datelist { (properties of .container_12) }
.datelist h3 { (properties of .grid_3) }
.datelist p { (properties of .grid_7) }
.datelist strong { (properties of .grid_1) }
<div class="datelist">
  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>
  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>
</div>


这个例子来表现,每个单元格以不同的标签形成,从而形成一个表格,而不是依靠<td>标签。(也许谈不上完美,但html不区分内容以什么构成)

 

在父元素上使用样式,而不是子元素

div和类并不局限与css。

最后一个例子,将会非常有趣,每次只定义一个样式,html中每行相同的样式属性会使用好几次,替换父节点而不是子节点。

不用每次这样:

.item { (various properties) }
<ul>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
</ul>

以上6个元素都有一个样式,这是多余的,因为样式名都是相同的,这里有个更好的方法:

.group-of-items li { (various properties) }
<ul class="group-of-items">
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

这里将样式类指定到一个父元素,css选择器将样式运用到所有 .group-of-items类里的<li>节点。这种方法可用于任何有一组有父节点的元素。如:

<div>
  <h1 class="title">…</h1>
  <h1 class="subhead">…</h1>
  <p class="publication-date">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
</div>
.title { (various properties) }
.subhead { (various properties) }
.publication-date { (various properties) }
.body-text { (various properties) }

这是一段简单的html样式,里面有很多不必要的css类,有时候我们也会有两个标题,但这里都用<h1>是不恰当的。这里有更好的方案:

<div class="article">
  <h1>…</h1>
  <h2>…</h2>
  <p class="publication-date">…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
</div>
.article h1 { (various properties) }
.article h2 { (various properties) }
.article .publication-date { (various properties) }
.article p { (various properties) }

现在只有两个元素标注样式了,我们把publication-date样式留下,以区别其他类。因为html没有一个<date>标签,所以我们必须用一个类来指定它包含什么内容。新的样式.article允许在它里面有两类元素,原来有4个样式标签,现在只有两个,干净多了。960gs和css的目的都是为了减少对网页布局的努力,css的好处是减少了html来显示页面,但作为一个布局语言,css并不完美,框架是一种工具,帮助人们来实现解决方案,而不是一种方案。它使开发者和设计者更容易使用class和div。

本文大部分参考: http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/

你可能感兴趣的:(css,grid,960)