應為我看都沒人有教CSS使用

所以以下我自己測試

看看就好

改的大概就變成我的base的樣子

有點難懂先說聲抱歉

http://www.gamebase.com.tw/mybase/gp997350
______________________________(從這以下開始)(P.S.可以直接copy，它會自動把註解的按鈕『[N1]』去除)

@charset "utf-8";

/*
HTML預設宣告 */

body{

background:[N1] ;

background-attachment:fixed;

background-position:[N2] [N3] ;

cursor:url("http://www.fileden.com/files/2008/3/14/1813312/sqs.ico");//一般狀態下滑鼠游標
}

a{
        6C0000[N4] ;

text-decoration:none;
}

a:hover{

border-bottom:none;
        [N5] ;

text-decoration:underline;

cursor:url("http://www.fileden.com/files/2008/3/14/1813312/2dq.ico");//超連結時滑鼠游標
}

/* 預設表格 */
table{

border:solid 1px #OOO;

border-collapse: collapse;

margin:0 auto;

text-align:center;

width:100%;
}
th{

border:solid 1px [N6] ;

padding:2px 0;

font-size:12px;

font-weight:bold;

background-color:#6F8CAA;

color:[N7] [N8] ;

text-align:center;
}
td{

border:solid 1px[N9] ;

font-size:12px;

padding:2px 2px 0 3px;

background-color:#80ADE4;

color:[N10] ;

text-align:left;
}

td a{

color:#003854;

text-decoration:none;
}

td a:hover{

border-bottom:none;

color:#003854;

text-decoration:underline;
}



/* 佈局 */
#header{

margin:0 auto;

width:1024px;

height:350px;

background:[N11] ;
}

#container{

margin:0 auto;

width:955px;

font-size:13px;
        [N12] ;

text-decoration:none;
}

#left{

float:left;

width:200px;
}

#center{

float:left;

width:555px;
}

#right{

float:left;

width:200px;
}

/* 版頭 */
#mybase_title{

position:relative;

top:40px;

width:600px;

color:#FCFFB3;

left: 450px;

font-size:14px;

filter:dropshadow(offx=1,offy=1,color=#000000,positive=true);
}

#mybase_title h4{

font-size:22px;

font-weight:bold;
}

#mybase_title h4 a{

color:#F7DD90;


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://i537.photobucket.com/albums/ff331/Ryugenta/Vocaloid/BLACKROCKSHOOTERCOVER.jpg) no-repeat !important;background:url();filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i112.photobucket.com/albums/n177/prostle/oi.gif', sizingMethod='crop');

font-size:15px;

color:[N13] ;

font-weight:bold;

padding:25px 0 0 15px;

height:25px;
}

#left .main, #right .main, #center .main{

border:solid 1px #004C7B;

padding:5px;

word-break:break-all;

overflow:hidden;

background-color:;//日記和欄位背景色 有需要請自行修改
        
}

/* 中間 區塊 */
#center .box{

margin:10px;
}

#center .box h4{

background:url(http://i112.photobucket.com/albums/n177/prostle/jesda.gif) no-repeat !important;background:url();filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src= '[N14] ',sizingMethod='crop');

font-size:15px;

color:[N15] ;

font-weight:bold;

padding:22px 0 0 60px;

height:29px;
}

.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 [N16] ;

padding:5px;
}

.diary .date{

display:block;
    [N17]
}

.diary .menu{

display:block;

text-align:right;
    [N18]
}

.diary .info{

display:block;

padding:10px 0;
    [N19] [N20] [N21]
}

/* 我的日記 回應 */
.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 4c4c4[N22] ;

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:3C5F0[N23] ;
}

#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:[N24]

height:[N25] ;
}

#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 4c4c4[N26] ;
    [N27]
}

#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:#EBF7F7;
}

/* 會員相關連結 */
#footer{

margin:10px;

padding:10px;

text-align:center;
}0px
(到這以上結束)

---

[N1]Mybase的底圖



[N2]背景的圖片從何處顯現(頂部、底部)



[N3]想要頂部就打crown，想要底部就打bottom



[N4]Mybase任何會點到不同地方的連結(例如我的日記名稱)的字體顏色



[N5]當指標碰到連結字體所變換的顏色



[N6]「會員資料」下面右邊的框框的顏色



[N7]「會員資料」下面右邊的框框內字體的顏色



[N8]右框內的字，指的是帳號、暱稱等等那欄



[N9]「會員資料」下面左邊的框框的顏色



[N10]「會員資料」下面左邊的框框內字體的顏色



[N11]此為版頭的底圖



[N12]Mybase的註解以及自我介紹的字體顏色



[N13]左邊標題(會員資料..)字體的顏色



[N14]中間標題(我的日記...)的圖片



[N15]中間標題(我的日記...)的字體顏色



[N16]每一篇日記的分隔線顏色



[N17]這個是自己加上的，更改「我的日記」的作者及著作時間的字體顏色



[N18]在這邊加上，會讓我的日記右下的字(未分類|回應...)中間的間隔線以及人氣變換顏色



[N19]在這邊加上，全部日記(不是點進去的)
顯示的字是這裡設定的顏色



[N20]如果我其中一篇顏色不同，例如全部都是黑色，其中一篇是粉色，它外面顯示的是設定的顏色(白色)，點進去後顏色才會不同



[N21]#fff是白色 [N21] [N21]



[N22]日記回應的分隔線顏色



[N23]我們答覆的字體顏色



[N24]好友名單、校友名單、誰加入我(三個)的版面寬度設定



[N25]好友名單、校友名單、誰加入我(三個)的版面長度設定



[N26]「我近期的文章」的外框顏色



[N27]這個是自己補上去的，改掉在我近期的文章[回覆][分享]這兩個的顏色

時鐘怎麼怪怪的＠＠？
非本國嗎？

註解的按鈕按了會新開主題耶，好像沒有效?

其實可以用 /*說明*/ 來做教學，
因為那些中間打中文字的區塊說明並不會影響到實際版面，所以可以直接加在CSS碼旁，
這樣以後要改就不會忘了該串是修改到哪個區塊囉，
如果嫌加/*說明*/的方式不夠顯眼，可以把說明文字直接加顏色，反正複製時不會連著原始碼一起過去。


#center{
float:left;
width:715px; ←可以修改欄寬達到二欄式的效果(715px是我MyBase的寬度)
}