Eddy@Joomla!

(0 位用戶參與評分, 當前平均得到 0 顆星星)

Joomla! / 美術設計 / Eddy Chang / 週六, 10 七月 2010 19:55

960 Grid System（以下簡稱960gs）是一個CSS的版面編版的框架，這個框架基本上是和css有關，和程式碼就沒什麼太大的關係。雖然CSS的排版框架並非只有960gs這套，但這套框架目前在Joomla!或Wordpress的佈景設計領域，受到歡迎的程度，遠遠高過其他的CSS排版框架，非常值得網站美術設計師或程式開發員，花點時間學習。這裡的文章就是我個人在網路上收集的許多資料的整理，以及學習的筆記。

先看使用960gs的一些使用重點：

960是指版面的寬度（width）最大只有960px，這也是這個框架的限制
不需擔心不同瀏覽器相容的問題
可以整合其他的程式框架，例如jQuery之類的
960gs的css定義都是用類別（class）定義，可重覆使用

一般會用到的排版欄數是12或16 grid的從左到右對齊，960中也提供了24欄等等更多不同的分隔欄，也有從右到左的對齊方式，這些就比較少見少用了，一開始學習可以從12 grid的開始，其他的也是類似。可以看每從排版欄數會有自己的最外圍css類別定義（如果是12 grid就是cantainer_12），例如下圖是12 grid的分割圖：

這個分割表中可以快速的查出要用的css類別定義，如果要設定佔一個grid的，css類別就是用grid_1，以此類推，最大寬度的就是grid_12，很簡單吧。

所以如果要用css寫出像下圖這樣的版面：

很快就可以寫出HTML碼如下：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>960 Grid System Tutorial</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
 
<style type="text/css">
div{background:#CCCCCC; margin:1px 0 1px 0;}
.container_12{background:#999999;}
</style>
</head>
 
<body>
<div id="container" class="container_12">
  <div id="header" class="grid_12">
    content goes here
  </div>
 
  <div id="leftCol" class="grid_3">
    content goes here
  </div>
 
  <div id="mainContent" class="grid_6">
    content goes here
  </div>
 
  <div id="rightCol" class="grid_3">
    content goes here
  </div>
 
  <div id="footer" class="grid_12">
    content goes here
  </div>
</div>
</body>
</html>

解說：

在5,6,7行要加入960gs的css定義檔案。
container_x類別的水平對齊是置中。
grid_x類別的水平對齊是置左。
grid_x的區塊，會有左右各10px的margin。要去除左邊需要加alpha類別，去除右邊要加omega。像是「<div id="footer" class="grid_12 alpha omega">」這樣的定義就是去除左右邊距。

grid_x的對照寬度如下列表所示：