960 Grid System 簡明使用教程

時間 2019-11-12

標籤 grid system 簡明使用教程简体版

原文原文鏈接

960 Grid System(960gs)是一個爲了簡化webUI設計工做流程而出現的寬度爲960像素的工具。它包含兩個版本，12列和16列，這兩個版本能夠單獨使用也能夠放一塊兒使用。css

960gs樣式說明：html

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列，以此類推。web

如圖，樣式名爲container_12的容器包含三個格柵，每一個格柵會包含不一樣的頁面元素。框架

在使用時，只用夠用的格柵，若是您的頁面只用到一個12列的格柵，只須要一個grid_5和一個grid_7，那其餘多餘的樣式就能夠刪除了。工具

樣式.container_x和.grid_x不限於<div>元素，這兩個樣式能夠用到除html、 head、 meta、 param、 script、 title、style外的全部標籤上。佈局

因此<body>中的任何標籤均可以用。若是一對<div>中只有一個html元素，那這個<div>就不須要，直接將樣式設置在這個html元素上便可。spa

能夠不用div的情景：設計

複製Grid屬性到某些元素

簡單的css樣式，.grid_x有能夠與其餘樣式或元素共同使用的元素，經過拷貝這些屬性，就省去寫新的樣式，如code

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

下面是效果：
orm

另外一個例子：

.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個格柵：

當<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/