日誌2007-09-05 00:54

小屋系統預設圖片更換教學 - PART 3

看到好多人的小屋都弄得真是專業....
深深覺得我自己的頗為陽春="=




好啦，
我是門外漢慢慢摸索，
心得PO上來當教學，
大家加減著看:D




今天來教大家一個超級雞肋的圖片更換...



教學開始。

1.右邊那個綠色的點，我想應該很多人都想換掉它吧...

2.請把CSS自訂面板打開

3.什麼都不要移，把下面紅色框框圈起來的那一句打在第二行，

用文字敘述的話就是像下面這樣：


/*--------------------------整體頁面設定--------------------------*/
body{list-style:url(http://圖片網址);}/*右邊的項目圖示*/


照慣例，圖片網址要先另外上傳哦。
圖片不要搞的太大，小小一個放上去就可以很可愛了。


4.按『確定送出』

09/13新增：
以下由yannan1 (毀滅者) 補充

這點其實我在看別人的css之後(忘了是誰了)，
就有看到可以在firefox上支援的語法了，
而且在ie上也行的通。

li{
BACKGROUND:url(http://pic.bahamut.com.tw/home/but_icon.gif) no-repeat;
}

上面這個是對所有li標籤有用的，
所以所有li標籤的圖都會由指定的圖片取代。

.post_list{
BACKGROUND:url(http://pic.bahamut.com.tw/home/but_icon.gif) no-repeat;
}

上面的語法是只有class取名為post_list的標籤才有用，
也就是右邊的那些前面有綠點的那幾行字。

ps.上面的圖片連結是在勇者小屋的某內定連結‧‧‧


也就是說，之前用我這篇教學的人，
可以把　body{list-style:url(http://圖片網址);}/*右邊的項目圖示*/　這行刪掉，改成
.post_list{
BACKGROUND:url(http://圖片連結) no-repeat;
}

我測試過了，OK沒問題!!

28

29

LINE 分享

相關創作

【被抹去的桔梗】地獄級 蒙大拿、十封王 無腦三成就

霸主精神病特輯1-屯物癖

【試玩】後宮養成經營遊戲《異世界奇妙生活》

留言

• 2007-09-05 01:02流星雲★：
  不會啦!你的小屋有母愛(?)不不～是春天的戀愛的感覺。
  最近過的不錯哦？(眨眼~~)
• 2007-09-05 01:19as1955：
  說教學文有如雨後春筍　您的教學可是圖文並茂　淺顯易懂　我推！ ( ′▽`)-oGP
• 2007-09-05 01:22御風：
  真的滿讚的~~~~~~
• 2007-09-05 02:37瑜：
  路過發現找到寶
  教學簡單又清楚
  謝謝分享喔!
• 2007-09-05 03:54成小玉：
  感恩~多謝大大的教學^^
• 2007-09-05 09:30玲麗：
  淵姊姊~~~~幫我做一個~~~~(蹭過去)
• 2007-09-05 09:56威志：
  不過小弟使用火狐來觀看時，綠色小點依然存在，然後妳做的小花圖片會另外出現在小綠點的左邊
  然後改用IE觀看時又會變正常.....偏偏我又是火狐的愛好使用者
  不知能不能改善火狐和IE語法的相容性
  
  妳的教學讓我學到很多，也希望妳能到我的小屋留個言或給個建議(小屋設計)，謝謝啦^^~

  2007-09-05 10:11淵：啊真的嗎，因為我沒用過火狐...
  還是謝謝你告訴我這點。

• 2007-09-05 13:07渴求翅膀的貓：
  感動,終於不用被css弄死一堆腦細胞了(倒)
• 2007-09-05 13:14遺忘：
  推~造福人群@@
• 2007-09-05 16:05君翔：
  想要直接加好友了.... ( ′▽`)-oGP　　　
• 2007-09-05 16:11J i l l ~*：
  同樣方法弄了以後
  原先的綠色珠珠還是在
  變成新的圖案和舊的同時存在 = ="

  2007-09-05 16:26淵：那這樣我想這個語法可能是只能把原來的綠色圓點蓋過去而已...

• 2007-09-06 00:23琉璃：
  會陽春嗎 @@" 我覺得很可愛啊---------
  
• 2007-09-06 16:14小屋因故停止更新：
  感謝~
  GP&收藏~
  (快去試試XD)
• 2007-09-06 17:10伊比魯斯：
  感謝教學
• 2007-09-06 21:02阿築：
  說真的,這麼多人在教我只看得懂你寫的,你的圖文並茂再加上清楚明瞭的解說,
  簡直就是新手的救星,再再加上您小屋清新可愛不雜亂,多教一些 ^ ^
• 2007-09-07 10:33高木　碁伸駿：
  只有文字的教學都看不懂啦　還是一圖解千文最棒>///<
• 2007-09-07 18:02昨日夢醒今日醉：
  這篇我也要推回去~推
• 2007-09-08 19:44Glass：
  用力地給它推~~~~~~~~！
  
  順便打包收藏唷　^0^
• 2007-09-08 23:41~Ceylon錫蘭~：
  收藏去了!感恩啊~>口<
• 2007-09-11 20:52☜♀★初戀★♂☞：
  淵大~小綠點沒辦法完全拿掉嗎?
  這樣有些圖不能用呢= =?

  2007-09-11 21:26淵：根據好幾個人跟我講，綜合起來的結果是，
  這圖應該只是能把綠點蓋過去，所以你只能設能把綠點蓋過去的圖片而已..

• 2007-11-07 23:08壞掉的熊貓：
  @@意思就是說只能用比他大的圖蓋過去對吧~
  
  小弟之前有學...
  
  可是全忘了>"< 要回去翻書了

  2007-11-07 23:09淵：你可以看一下我後面有用黑色字體補充的部分，
  那個語法可以直接讓你的圖片取代綠點，
  而不是只有蓋住而已

• 2008-01-14 16:39深藍之痕：
  感謝分享
• 2008-02-04 18:50赫爾萊恩。小赫：
  多謝淵大～
  成功了！！
• 2008-02-13 16:20小角落..：
  寫的太讚了~~感謝你的教學>Q<
• 2008-02-14 21:58婪祤ゞ゜：
  感謝淵姐的分享教學~~
  我還把圖給換成動態的GIF檔的說
  線在還在慢慢改造中
• 2008-02-18 00:17冰珞月：
  很詳細的解說唷
  還是有圖片比較容易懂呢
  非常感謝
• 2008-02-18 00:18起舞弄清影：
  感謝你的教學，我帶走哩^^
• 2008-08-21 19:25澪：
  精華
• 2010-03-24 22:11歐西：
  太神手啦~

• 送出