求助 | 登入
Portal 版面設計基礎說明
by help, 2008-05-06 16:36:32, 人氣(793)

 

以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):

1. 設定網誌背景 (圖片與顏色)
透過 body 內的 background 屬性設定,例如:
body { background:#000000; } /* 將背景設成黑色 */
body { background:url(圖片網址); } /* 將圖片網址設成背景 */

2. 設定網誌文字 (字型、大小與顏色)
透過 body 內的 font-family、font-size 與 color 屬性設定。例如:
body {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

3. 設定網誌位置 (置左、置中、置右)
透過 body 內的 text-align 屬性設定置左(left)、置中(center)、置右(right)。例如:
body { text-align: left;} /* 網頁置左 */

4. 設定標題圖片 (顏色、圖片)
透過 #banner 內的 background 屬性設定,來控制標題的顏色或圖片。例如:
#banner { background:#000000; } /* 將標題設成黑色 */
#banner { background:url(圖片網址); } /* 將圖片網址設成標題 */

5. 設定標題文字 (字型、大小與顏色)
透過 #bannerTitle 中 font-family、font-size 與 color 屬性設定。例如:
#bannerTitle {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

6. 設定副標題文字 (字型、大小與顏色)
透過 #bannerNote 中 font-family、font-size 與 color 屬性設定。例如:
#bannerNote {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

7. 設定標題大小 (長、寬)
透過 #banner 內的 height 與 width 屬性設定,來控制標題圖片的長與寬。例如:
#banner {
    width: 1000px;
    height: 100px;
}

8. 設定選單區塊圖片 (顏色、圖片)
透過 .navi 內的 background 屬性設定,變更選單區塊顏色或圖片。例如:
.navi { background:#000000; } /* 將連結圖設成黑色 */
.navi { background:url(圖片網址); } /* 將圖片網址設成連結圖 */

9. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過 .naviOver 內的 background 屬性設定,變更選單區塊滑鼠經過時的顏色或圖片。例如:
.naviOver { background:#000000; } /* 將連結圖設成黑色 */
.naviOver { background:url(圖片網址); } /* 將圖片網址設成連結圖 */

10. 設定連結文字 (字型、大小與顏色)
更改背景後,連結文字可能因為顏色相近的關係看不太清楚,透過 a 中的 font-family、font-size 與 color  屬性設定變更。例如:
a:link { color:#0000FF; } /* 連結字體變藍色 */
a:visited { color:#00FF00; } /* 點擊連結過文字變成綠色 */
a:hover { color:#FF0000; } /*  滑鼠移動到連結時字體變紅色 */
a:active { color:#FFFFFF; } /* 執行中連結變白色 */

11. 設定側欄標題文字 (字型、大小與顏色)
透過 .menuBlockTitle 中加入 font-family、font-size 與 color 屬性設定。
例如:
.menuBlockTitle  {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

12. 設定側欄中非連結文字 (字型、大小與顏色)
透過 .menuBlockBody 中 font-family、font-size 與 color 屬性設定。例如:
.menuBlockBody {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

13. 設定 logo 位置
透過 #bannerTitle 中 left、top 的屬性設定,可改變上標題 logo 的位置。例如:
#bannerTitle { left:10px; top:10px; } /* 左上各平移10px */

14. 設定選單位置
透過 #navi 中的 left、top 的屬性設定,例如:
#navi { left:10px; top:10px; } /* 左上各平移10px */

15. 設定文章的標題文字 (字型、大小與顏色)
透過 .Subject 中 font-family、font-size 與 color 屬性設定。例如:
.Subject {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

附件
1. css.png (18 KB)

討論
編號標題回應日期
2656
1
2011-01-17, 小幫手
發表討論