知識社群登入
版面設計基礎說明 (css 設定)
by 鍾玉芳, 2010-04-01 18:32, 人氣(7202)

除了預設的樣式外,也可以透過 [社群管理 / 編輯樣式] 設計社群呈現的樣子


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

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

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

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

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

7. 設定工具列的背景色 / 圖片
透過 #tool 內的 background 屬性設定,變更選單區塊顏色或圖片。例如:
#tool { background:#000000; } /* 將工具列背景設成黑色 */
#tool { background:url(圖片網址); } /* 將工具列背景設成圖片 */

8. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過#tool li a:hover 內的 background 屬性設定,變更選單區塊滑鼠經過時的顏色或圖片。例如:
#tool li a:hover  { background:#000000; } /* 滑鼠經過時背景變成黑色 */
#tool li a:hover  { background:url(圖片網址); } /* 滑鼠經過時背景變成圖片 */

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

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

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

12. 設定標題文字位置
透過 #banner .title 中 left、top 的屬性設定,可改變標題文字的位置。例如:
#banner .title { position:relative; top:10px;} /* 標題文字由原本的位置開始向下移動10px */

13. 設定選單位置
透過 #tool 中的 left、top 的屬性設定,例如:
#tool { font-size: 15px; } /* 字體大小變成 15px */

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

討論
編號標題回應最後發表
19497
1
0
5522
2
0
829
4
0