CSS樣式架構[2] 全站共用型 (Common):重置樣式與框架樣式

241 月

CSS樣式架構[2] 全站共用型 (Common):重置樣式與框架樣式

重置樣式 (reset.css)

為了統一所有瀏覽器內建值,避免hack寫不完,所以每一頁一定要引入重置樣式reset.css,現在最多人使用的reset有兩套,一套是Eric Meyer的版本,一套是YUI (Yahoo UI Library) 的版本。我們目前採取的是Eric Meyer的版本,不過有一個地方略有不同,我們把背景色設成透明的這項規則拿掉,因為在IE底下有些要用js去改變tr的背景顏色,會被這一條規則影響而無法運作。

相關參考內容:

框架樣式 (layout.css)

這支css的用途是在定義網頁的架構樣式,所以一些像font、color…等與結構無關的樣式設定,應該要避免設定在這支css內。

而在結構名稱上也有一個固定模式,在body底下分為header(天)、content-wrapper(內容)、footer(地),如果是兩欄式的就在content-wrapper裡面再分為content-main(主要內容)、content-sidebar(內容邊欄),如果是三欄式的就在content-wrapper裡面多加一個content-nav(內容導覽),習慣上我們都把content-sidebar放在右邊,content-nav放左邊,不過還需要看欄位的重要性來定,與content-main關聯比較大的為content-nav,較common的為content-sidebar。

不管是兩欄式或是三欄式的結構,content-wrapper裡面的書寫順序應該以重要性去排列,最重要的寫在最前面,所以我們都是以content-main為第一優先,content-nav次之,content-sidebar排最後。

底下是兩欄式的結構示意圖:
注意最外層的#wrapper結構,一般為了加快網頁呈現的速度,建議非必要的話,是可以省略的。
兩欄式的結構示意圖

二欄式Html範例:

兩欄式的html範例圖
 

 底下是三欄式的結構示意圖:
注意最外層的#wrapper結構,一般為了加快網頁呈現的速度,建議非必要的話,是可以省略的。
三欄式結構示意圖

三欄式Html範例:

三欄式html範例
 

Posted by admin  Posted on 24 1 月 
  • CSS, Eric Meyer, YUI
  • Post Comments 0