960 Grid System是使用固定寬度960pixel(像素)置中對齊畫面的方式呈現在網頁上,去除左右兩邊各10pixel的空間,留下中間940pixel的區塊以20pixel作為間隔分欄。在空間設計上,可隨意合併多欄作為版面配置及網頁尺寸的設定,合併出來的欄寬也不會有畸零數,有利於CSS中DIV寬度的設定。

網頁設計 960 Grid System

圖:960 Grid System - Demo(12欄)

960grid分為12欄與16欄兩種,其中因12能被3、4、6整除,能建立3欄、4欄、6欄的版面配置,在使用上較為靈活,以下以12欄的樣式做為示範。

只有左欄的尺寸設定

通常使用於內頁設計:左方邊欄+主要內容。

網頁設計 左欄

同時有左右欄的尺寸設定

常見於部落格的版面設計,使用於同時有左右兩個選單的時候。

網頁設計 左欄及右欄

三欄的尺寸設定

通常用在首頁或網站下方的自訂區塊(user-custom),可放置快速連結、最新消息、廣告訊息…。

網頁設計 三欄

四欄的尺寸設定

通常用在首頁或網站下方的自訂區塊(user-custom),可放置快速連結、最新消息、廣告訊息…。

網頁設計 四欄

 

參考資料(外部連結)


 

ABOUT CADIIS

CADIIS凱士網頁設計公司專精於RWD網頁設計、形象網站設計、企業網站建置等各項網頁設計服務,提供台北、台中、台南、高雄、海外等地網站設計相關服務。

 

進一步了解