甜蜜媽咪痞世界

 部落格裡有很多css教學文章...我以為大家或許都已經會使用了

但是仍然有很多人問我..所以我轉貼相關文字讓大家參考....

是不是想要讓您的部落格性別圖示更與眾不同，

如果是，您可以利用下面的方式，置換成您想要的圖案。

當然首先您要有各可以連結到的圖片網址，

可以利用free的網頁空間或是您自己的網頁空間，來放置您想要連結到的圖。

(『管理部落格』-->『面板設定』-->『自訂樣式』)

然後在『管理部落格』的裡面，『外觀設計』單元中的『面板設定』裡面的『自訂樣式』中，加入下列CSS語法：

#ymodprf .horos img{display:none;}

#ymodprf .horos{width:60px;height:75px;background:url(http://www.xxx.com/xxx.gif) center no-repeat;}

語法說明：

#ymodprf .horos img{display:none;} 

此行先將性別圖示隱藏起來

#ymodprf .horos{width:60px;height:75px;background:url(http://www.xxx.com/xxx.gif) center no-repeat;}

此行拆解說明如下：

width:60px;height:75px;

此行將原本樣式的CLASS重新改寫：設定這各樣式(CLASS)的寬度為60px以及75px，也就是等於你要放置的圖片大小。

background:url(http://www.xxx.com/xxx.gif) center no-repeat;

此行將你想要放置的圖片變成背景圖來呈現，所以這裡的URL要放你想要放的圖片的連結。可放JPG或是GIF格式，center是設置為置中，no-repeat是設定背景不需要重複拼貼，雖然我們已經設定寬高，照道理是不會看到拼貼的情況，不過，還是介紹這各語法，也許您可以想出更多應用的效果。

以上希望大家都可以試試看喔！