[網頁教學] 什麼是網頁網格(Grid System)?
2011-09-26
960 Grid System是使用固定寬度960pixel(像素)置中對齊畫面的方式呈現在網頁上,去除左右兩邊各10pixel的空間,留下中間940pixel的區塊以20pixel作為間隔分欄。在空間設計上,可隨意合併多欄作為版面配置及網頁尺寸的設定,合併出來的欄寬也不會有畸零數,有利於CSS中DIV寬度的設定。
圖:960 Grid System - Demo(12欄)
960grid分為12欄與16欄兩種,其中因12能被3、4、6整除,能建立3欄、4欄、6欄的版面配置,在使用上較為靈活,以下以12欄的樣式做為示範。
只有左欄的尺寸設定
通常使用於內頁設計:左方邊欄+主要內容。
同時有左右欄的尺寸設定
常見於部落格的版面設計,使用於同時有左右兩個選單的時候。
三欄的尺寸設定
通常用在首頁或網站下方的自訂區塊(user-custom),可放置快速連結、最新消息、廣告訊息…。
四欄的尺寸設定
通常用在首頁或網站下方的自訂區塊(user-custom),可放置快速連結、最新消息、廣告訊息…。
參考資料(外部連結):