招呼語圖框自訂樣式應用－ㄚ仔的瘋格

招呼語圖框自訂樣式應用(二度空間)語法編輯(適合2008/2月以後CSS新制)

模擬示範：

這裡記錄了我的點點滴滴...歡迎光臨我要留言

招呼語底圖：

http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=16514

語法應用：

#yblast .bg {background:url(http://img215.imageshack.us/img215/2747/10ee2.gif) no-repeat;position:relative;top:0px;left:80px;height:50px;background-position:center;}

#yblast .text {position:relative;top:3px;left:15px;font-family:新細明體; color:#00007f;}

#yblast a {font-family:新細明體; color:#ff0000;}

#yblast {text-align:center;position:relative;top:8px;left:-70px;}

語法解說：

/*由左至右依序解說-在此位置分三段設定，適合不同圖片，方便調整，並且比較不容易受其它環境設定影響，取絕對的置放位置*/

/*文字背景圖片部分*//*背景圖網址-絕對位置-靠上的位置-靠左的位置-圖片顯示的高度(通常與圖片同高)-背景圖片置中*/

#yblast .bg {background:url(http://img215.imageshack.us/img215/2747/10ee2.gif) no-repeat;position:relative;top:0px;left:80px;height:50px;background-position:center;}

/*文字部分*//*絕對位置-靠上的位置-靠左的位置-字型-字體顏色*/

#yblast .text {position:relative;top:3px;left:15px;font-family:新細明體; color:#00007f;}

/*文字連結部份*//*預設使用招呼語加上連結時的字型與文字顏色*/

#yblast a {font-family:新細明體; color:#ff0000;}

/*招呼語主框架部份*//*置中位置-絕對位置-靠上的位置-靠左的位置*/

#yblast {text-align:center;position:relative;top:8px;left:-70px;}

貼語法路徑→管理部落格→面板設定→自訂樣式→加入語法→確定

自訂樣式檢圖說明範例→ http://xs320.xs.to/xs320/07421/W6-4.jpg