招呼語圖框自訂樣式應用(適合2008/2月以後CSS新制) @ 甜蜜媽咪痞世界

招呼語圖框自訂樣式應用(適合2008/2月以後CSS新制)

分類：網頁知識

2008/05/06 11:52

　招呼語圖框自訂樣式應用(二度空間)語法編輯(適合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;width:510px;background-position:center;}

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

#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;width:510px;background-position:center;}

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

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

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

#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