發佈：IKFOR FORUM
版本：2006.12.21 13:57
程度：初級人士
以下我們用十數分鐘詳盡介紹最簡單的SKIN修改，
當你活用後，3分鐘也不用就能完成以下所有工作
1.
進入後台:
我的空間 >>
空間管理 >>
模板風格 >> 更換空間風格主題
選擇一個名叫
簡單又簡單 的風格
2.
我的CSS風格編輯
3. 改頂部圖片
我地準備了一張770x311大小的圖片
http://hi.ikfor.com/myskin/simple/header.jpg
在第二步中，我們找到以下一行：
#header { background: #1C5B9E; margin-bottom: 5px; }
現在，我們在"}"前插入：
background: #9932CC url
http://hi.ikfor.com/myskin/simple/header.jpg) no-repeat;
結果如下：
#header {
background: #1C5B9E; margin-bottom: 5px;
background: #9932CC url
http://hi.ikfor.com/myskin/simple/header.jpg) no-repeat;
}
4. 先保存看看效果.
OH~ 為什麼只有看到女孩的眼，沒有了可愛笑容?
不用怕，進入第5步啦
5.設置頭頂圖片高度
語法：height: 311px;
311 是你圖像的高度
都是在#header {} 中加入
結果如下：
#header {
background: #1C5B9E; margin-bottom: 5px;
background: #9932CC url
http://hi.ikfor.com/myskin/simple/header.jpg) no-repeat;
height: 311px;
}
現在再保存看看，見到可愛笑容了!!^^
6. 解釋CSS語法時間
其實CSS設置背景圖是有多種方法的：
方法一:
複製內容到剪貼板
代碼:
background-image: url(http://hi.ikfor.com/myskin/simple/header.jpg);
background-repeat: no-repeat;
background-color: #9932CC ;方法二:
複製內容到剪貼板
代碼:
background: #9932CC url(http://hi.ikfor.com/myskin/simple/header.jpg) no-repeat;方法一和二效果是一樣的, 不信可以試試。
以下是解釋：
紅色線 - 填入你的圖片網址
綠色線 - 設置圖片是否重複 (分別有四種，大家可以自己試試分別：repeat, no-repeat, repeat-x, repeat-y)
橙色線 - 設置顏色，填入色碼就可以 (亦可以直接填入顏色名稱，例如：red, black, white ...)
============================
Q：我學左咁耐，先只係改頂部背景圖？
A：不是，只要學識如何用CSS設置頂部背景圖，以後任何一個位置都是一樣語法的，只要小小改動便可。
7. 休息２分鐘，頭腦輕輕鬆 .................. . . . ........ ...... . .. . . ....
..............
...........
...
..
.
時間到
8. 看下一貼
