其他實用教學

感謝各位熱心又有才華的板友^^
● 《CSS樣板設定》修改實線與虛線的顏色 by 烈炎の主
 

mybase的CSS設定簡單教學

by 龐克小女僕♡ | 2007-08-03 17:46:38
這次改版後新增的個人化功能，讓會員擁有了類似部落格的mybase可以使用，目前官方提供了兩個樣版可供使用，將來一定也會有更多熱心的人提供他們的創作，但如果想要有個人特色，還是要從css做修改才行。
進入後台後，從左邊的mybase設定點選進入，在選擇右邊CSS樣版設定。進入後一片空白，要在從上方選擇一個現有的樣版來做修改。目前只有黑色與白色兩個樣版可以使用，就以白色樣版來作範例。
這兩個官方的CSS非常貼心，大多數的區塊都有註解，很容易就能找到要修改的目標。
/*整頁HTML內文字預設宣告 目前有連結整網站gbCSS 請參考html*/
body{font-size:13px;color:#333;text-decoration:none;}
body{font-family: Arial, Helvetica, sans-serif,新細明體,}
a{color:#105CB6;}
a:hover{border-bottom:none;color:#105CB6;text-decoration:underline;} 

這是變更整個網頁字型、大小、顏色所用。建議不要修改字體，因為大部分的字型或多或少都有缺字，目前微軟Vista的正黑體或許是中文字最完整的字型，不過即使修改了字型，假設瀏覽者沒有安裝相同的字體，一樣只會顯示新細明體跟Arial。
其中a與a:honver是表示宣告超連結的文字，分別是超連結與點選後的字。
CSS都是以這種方式宣告狀態，中括號左邊為宣告的目標，括號裡面為目標設定的狀態，不同的項目以分號做區隔，無視斷行。  
/* 版頭 */
#header{height:150px; width:955px;margin:0 auto;background:url(http://member.gamebase.com.tw/images/css/w/mybase_header.jpg) no-repeat;}
#header #header_title {color:#FFF;position:relative;top:50px;margin-left:60px;}
#header #header_title h5{color:#FFF;font-size:30px;font-weight:bold;}
第一個個人化最佳選擇，版頭圖片，就是最上方的那張圖。在這裡宣告為header。總共有四行，不過總共只有三個項目。
  
 第一行：
#header{height:150px; width:955px;margin:0 auto;background:url(http://member.gamebase.com.tw/images/css/w/mybase_header.jpg) no-repeat;}
這兩行是連在一起的，中括號一進來宣告的是版頭的預留大小，原始設定為寬955，高150，建議新手不要修改寬度，因為這必須考慮到包括中間列以及左右列總長度的整體性，弄不好可能會變得很難看。background:url(圖片網址)就是設定圖片了，大小最好跟預設的大小一致，過小就會自動對齊，很醜，過大可能會被切掉或者出血，一樣很難看，最後面的no-repeat就是不重複之意，如果圖片小於預設空間大小，那就是只放一張，如果改設重複，那就會看到一堆相同的圖片排列在那個區塊內。 
第二三行： 
#header #header_title {color:#FFF;position:relative;top:50px;margin-left:60px;}
#header #header_title h5{color:#FFF;font-size:30px;font-weight:bold;}
這兩行是設定title的字體顏色、大小、位置，top:50px;margin-left:60px是表示字的位子，從上方往下50像素，離左緣60像素。雖然官方宣告可能將來會做修正(看過整個內容之後我也覺得可以改的更淺顯易懂)，不過主要做的都是區塊的重新命名與定義，在語法與意義上還是相同的，所以，繼續寫下去吧。 
 /* 上面的連結 */
#toplinks{height:32px; width:955px; margin:0 auto; background:url(http://www.gamebase.com.tw/member/images/toplinks_bg.jpg) no-repeat;}
#toplinks #links{height:25px; width:955px; text-align:center; position:relative;top:8px;} 
 這應該是某處連結的banner，不過我沒嘗試，而且我的頁面也沒出現下面這張圖，所以也不知道該出現在哪。
 
 /* 包住下方最大的DIV */
#container{width:955px;margin:0 auto;margin-top:16px;} 
 扣掉版頭部分下面所有區域的大小。margin-top:16px是與上方版頭的間距。 
 /* 用到的class */
h4{ font-size:15px; color:#353536; font-weight:bold; padding:8px 0 0 20px;}/* 標題字 */
.no{border-bottom:1px dashed #a0dfea;}/* 虛線 */
.dot{position:relative;top:1px;}/* 點的位置 */
.head_pic01{background:url(http://www.gamebase.com.tw/member/images/200x31.gif);}/* 自我介紹的標底圖 */
.head_pic02{background:url(http://www.gamebase.com.tw/member/images/200x31_2.gif);}/* 相關資料的標底圖 */
.head_pic03{background:url(http://www.gamebase.com.tw/member/images/355x31.gif);}/* 355px的標底圖 */
.main_pic{background:url(http://www.gamebase.com.tw/member/images/450x1.gif) repeat-x bottom;}/* 個人服務內容的漸層底圖 */
(下略) 
下面還有很多，不過都只有就單行作註解，而且編排上似乎還不夠完善，我想這就是日後會修改的部分。
那些head_pic就是各個欄位標題的底圖，可以從原圖的樣子來判斷應該是在哪的。 
後面還有一段 
 #member_head{float:left; width:535px; height:31px; background:url(http://www.gamebase.com.tw/member/images/545x31.gif) no-repeat; margin-top:12px;}/* 
這是文章那區的標題，就是寫著「我的日記」跟「我的近期文章」那兩條，一樣可以自設大小跟底圖以及跟上面的區域的間隔，預設是12。 
簡單的教學就做到這裡，只要就文字顏色跟幾個圖片作修改就能跟其他人有所區別了，日後即使頁面做修改了，只要知道各區塊宣告的名稱，也很容易就能修改。