960 Grid System 简明使用教程

最新推荐文章于 2019-07-25 11:45:03 发布

转载最新推荐文章于 2019-07-25 11:45:03 发布 · 179 阅读

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/i33/blog/55240

本文介绍了一个宽度为960像素的工具960GridSystem，旨在简化网页UI设计工作流程。它提供了多种容器和格栅样式，如.container_x、.grid_x等，用于创建响应式网页布局，同时提供了容器、格栅、清除margin、补空、重新开始、偏移等样式，以及如何在实际网页设计中应用这些样式的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

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的情景：

复制Grid属性到某些元素

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

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

下面是效果：

three list items transformed into columns

另一个例子：

.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>

tablular data marked with non-table tags

这个例子来表现，每个单元格以不同的标签形成，从而形成一个表格，而不是依靠<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/

转载于:https://my.oschina.net/i33/blog/55240