(咳)

你準備好了美美的標題圖、背景圖、板頭，但遇上CSS就沒輒了嗎?

這邊教你怎麼簡易的使用CSS來佈置有個人風格板面>____<

相信CSS不難，不是理工系也可以做出漂亮板面唷!

這篇就拿我投稿的CSS及基地黑色樣式當做範例好了~~~

*僅適用遊戲基地MyBase的CSS

*每個樣式的CSS碼排板不同，請自行尋找正確的位置，不要改錯地方唷。

*因為欄位空間關係，我的說明沒辦法圖文並茂，很抱歉唷!

首先，假設你要開始改的樣式是這樣

CSS語法如下:

@charset "utf-8";

/*  HTML預設宣告 */

說明1)body{
 background-color:#343232;
 background-attachment:fixed;
}

說明2)a{
 color:#FADC96;;
 text-decoration:none;
}

a:hover{
 border-bottom:none;
 color:#FADC96;;
 text-decoration:underline;
}

/* 預設表格 */
table{
 border:solid 1px #343232;
 border-collapse: collapse;
 margin:0 auto;
 text-align:center;
 width:100%;
}

th{
 border:solid 1px #343232;
 padding:2px 0;
 font-size:12px;
 font-weight:bold;
 background-color:#365767;
 color:#D9F9FF;
 text-align:center;
}

td{
 border:solid 1px #343232;
 font-size:12px;
 padding:2px 2px 0 3px;
 background-color:#3F4D53;
 color:#A1B8BC;
 text-align:left;
}

td a{
 color:#FFF;
 text-decoration:none;
}

td a:hover{
 border-bottom:none;
 color:#FFF;
 text-decoration:underline;
}

/* 佈局 */
說明3-1)#header{
 margin:0 auto;
 width:955px;
 height:150px;
 background:url(http://images.gamebase.com.tw/2007/mybase/mybase_b/mybase_header.jpg) no-repeat;
}

說明3-2)#container{
 margin:0 auto;
 width:955px;
 font-size:13px;
 color:#ADAEBA;
 text-decoration:none;
}

#left{
 float:left;
 width:200px;
}

#center{
 float:left;
 width:555px;
}

#right{
 float:left;
 width:200px;
}

/* 版頭 */
#mybase_title{
 position:relative;
 top:50px;
 width:600px;
 color:#FFF;
 left: 60px;
}

#mybase_title h4{
 font-size:30px;
 font-weight:bold;
}

#mybase_title h4 a{
 color:#FFF;
 text-decoration:none;
}

#mybase_title h4 a:hover{
 border-bottom:none;
 color:#FFF;
 text-decoration:underline;
}

/* 左列 右列 區塊 */
#left .box , #right .box{
 margin:10px 0 10px 0;
}

#left .box h4, #right .box h4{
 background:url(http://images.gamebase.com.tw/2007/mybase/mybase_b/head_pic01.gif);
 font-size:15px;
 color:#FFF;
 font-weight:bold;
 padding:8px 0 0 30px;
 height:23px;
}

#left .main, #right .main, #center .main{
 border:solid 1px #4D7A82;
 padding:5px;
 word-break:break-all;
 overflow:hidden;
 background-color:#3C3C3C;
 
}

/* 中間 區塊 */
#center .box{
 margin:10px;
}

#center .box h4{
 background:url(http://images.gamebase.com.tw/2007/mybase/mybase_b/member_head.gif);
 font-size:15px;
 color:#FFF;
 font-weight:bold;
 padding:8px 0 0 30px;
 height:23px;
}

.center_title{
 font-size:13px;
 color:#353536;
 font-weight:bold;
 padding:8px; 
}

/* 會員資料 */
#data .avata{
 margin:0 10px 10px 10px;
 display:block;
 text-align:center;
}

/* 近期日記 標記討論版*/
#diary_list li, #mark_forum li{
 list-style-type:square;
 margin-left:20px;
}

/* 我的日記 */
.diary h5{
 font-size:16px;
 font-weight:bold;
}

.diary li{
 border-bottom:solid 1px #CCC;
 padding:5px;
}

.diary .date{
 display:block;
}

.diary .menu{
 display:block;
 text-align:right;
}

.diary .info{
 display:block;
 padding:10px 0;
}

/* 我的日記 回應 */
.diary .diary_reply_title{
 margin-top:20px;
 display:block;
 font-size:16px;
 font-weight:bold;
}

.diary .raply_bottom{
 display:block;
 text-align:right;
}

#diary_reply li{
 border:solid 1px #c4c4c4;
 margin-bottom:10px;
}

#diary_reply h5{
 font-size:13px;
 font-weight:bold;
}

#diary_reply .date{
 display:block;
 text-align:right;
}

#diary_reply .answer{
 display:block;
 padding:10px;
 background-color:#EBF7F7;
}

#diary_reply .answer_title{
 display:block;
 padding:5px;
 font-size:13px;
 font-weight:bold;
}

#reply_box td{
 padding:5px;
}

/* 好友名單 校友名單 誰加入我 */
#friends li, #school_friend li, #who_add_me li{
 float:left;
 margin:3px;
}

#friends img, #school_friend img, #who_add_me img{
 width:85px;
 height:85px;
}

#friends .friend_name, #school_friend .friend_name, #school_friend .school_name, #who_add_me .friend_name{
 display:block;
 width:80px;
 margin:4px 0;
 text-align:center;
 overflow:hidden;
}

/* 我的文章 */
#topic li, #topic_list li{
 border:solid 1px #c4c4c4;
}

#topic h5, #topic_list h5{
 font-size:14px;
 font-weight:bold;
 margin:5px;
}

#topic .menu, #topic_list .menu{
 font-size:12px;
 display:block;
 text-align:right;
 margin:5px;
}

/* 繼續閱讀 */
.more{
 display:block;
 text-align:right;
 padding:10px;
}

/* 分頁表格 */
.page_table{
 width:0;
 margin:10px auto;
}

.page_table td{
 text-align:center;
 white-space:nowrap;
 padding:2px 5px;
 font-size:13px;
}

.page_select{
 font-weight:bold;
 background-color:#365767;
}

/* 會員相關連結 */
#footer{
 margin:10px;
 padding:10px;
 text-align:center;
}

1.背景

/*  HTML預設宣告 */

body{
 background-color:#343232;
 background-attachment:fixed;
}

----------------------------------------------------------------

首先，你有兩個選擇，一個是讓一種顏色填滿整個背景，

也就是

background-color:#顏色代碼;

另一個是讓圖以重複出現的方式放在背景上，

也就是

 background:url(圖片網址);

這裡我選擇拿此圖填滿背景，因此修改後的CSS如下:

background:url(http://abc480528.googlepages.com/line_back.gif);

修改後的圖片如這樣

2.連結字顏色

/*  HTML預設宣告 */

a{
 color:#0099FF;
 text-decoration:none;
}

a:hover{
 border-bottom:none;
 color:#FADC96;;
 text-decoration:underline;
}
----------------------------------------------------------------

這裡的「a」所指的就是「連結」，而「a:hover」就是滑鼠移至連上變換的顏色，

只需調整color

color:#顏色代碼;

今天我要連結字色是0099FF，滑鼠移至連結上後連結顏色變為FFCC33

所以調整後的CSS碼如下:

a{
 color:#0099FF;
 text-decoration:none;
}

a:hover{
 border-bottom:none;
 color:#FFCC33;
 text-decoration:underline;
}
調整後會變成這樣

3.板頭、欄位內文字色

以上三個皆於/* 佈局 */中進行調整

這裡有五個可以控制的地方，分別是:

#header{    --板頭圖片調整

#container{    --全欄位內文、標題調整

#left{、#center{、#right{    --個別調整左、中、右欄位

1)板頭

#header{
 margin:0 auto;
 width:955px;
 height:150px;
 background:url(http://images.gamebase.com.tw/2007/mybase/mybase_b/mybase_header.jpg) no-repeat;
}

width:板頭圖片寬度，單位px;
height:板頭圖片高度，單位px;

background:url(板頭圖片網址) no-repeat;

今天我要板頭是這個圖片，寬度955，高度123

因此修改後如下:

#header{
 margin:0 auto;
 width:955px;
 height:123px;
 background:url(http://abc480528.googlepages.com/blog_hea.PNG) no-repeat ;
}

----------------------------------------------------------------

2)欄位字色

#container{
 margin:0 auto;
 width:955px;
 font-size:13px;
 color:#ADAEBA;
 text-decoration:none;
}

修改color:#顏色代碼;

今天我要使用2E2E2E這個顏色，

於是修改後如下:

#container{
 margin:0 auto;
 width:955px;
 font-size:13px;
 color:#2E2E2E;
 text-decoration:none;
}

這兩項修改完後的板面會變這樣

...今天先這樣好了，時間不太夠=_____=