招呼語框置中語法完整教學
衷心感謝小米酒大大熱心教學!
以下是教學文章↓
米酒來教大家招呼語框置中的語法嚕!
最近啊!米酒發現格友都有許多問題,
有些人呢!是利用部落格整個版面的文字置中語法來令招呼語框置中的,
但是很多格友啊!都告訴米酒,文字置中我覺得段落不明很亂,
把文字置中語法拿掉,我的招呼語框又靠左對齊,該怎麼辦呢?
讓米酒來告訴大家吧 ^^..不需要用文字置中語法,招呼語框也可以置中喔!
改為個人風格招呼語框的語法:
/*小米酒★招呼語框-開始*/ #yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(招呼語框圖片網址
/*小米酒★招呼語框-結束*/
PS:但是以上語法,只能換上個人風格的招呼語框圖片,並沒有讓招呼語框置中啊!怎麼辦呢?
別急!小米酒會將完整語法仔細教給各位的喔 ^^
如果呢!想要將招呼語框的圖與文字置中,請參考米酒所列的語法,就不需再用全文字置中的語法下去補足嚕!
將招呼語框語與框內文字置中語法:
/*小米酒★招呼語框-開始*/
#yblast{zoom:1;position:relative;top:-20px;left:280px;margin:0 0 100px 0;z-index:2;}
#yblast .text,#yblast .bg{overflow:hidden;padding:5px 50px;width:424px;height:54px;}
#yblast .text{zoom:1;margin:-58px 0 0;}
#yblast .text a
#yblast a.edit{background:url(招呼語框圖片網址) ;width:13px;height:13px;}
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(招呼語框圖片網址) no-repeat}
#yblast .text{color:#00AA00;font-size:100%;}
/*小米酒★招呼語框-結束*/
<<<<<<<<<<<以下是小米酒示範的招呼語框與文字置中完成圖>>>>>>>>>>>>>>>>
先說明,米酒使用的版型與大家的版型不一樣,
要測試的時候不能依我的標準為標準,
因為每一張圖檔與版型的契合度都會不相同的啊,
還有你填寫上的招呼語字數多寡以及是否有使用框線跟框線透明。
都會影響數值,所以請大家慢慢更改數值反覆測試喔!
語法解說:
招呼語框置中
本來left:0px是0,現在我把它調至left:280px,招呼語框在中間了。
這調整的方法要依每張圖檔的寬來做調整唷!(數字越小圖會越左邊喔!) 調整圖框空繫 第二行的50PX,是調整招呼語框整個圖的高度! px 越高圖檔就會越低,相反的px 越低圖檔就會越高。 調整文字往右移動 padding:5px 50px,我調整至50px,文字也就跟著往右移, 調整px越高,當然文字也就會越往右移動。 設定圖檔寬高 width:424px;height:54px→這個地方,是每張圖檔的寬高。 我所示範的招呼語框圖檔 寬→424 高→54 字體大小更改 font-size:100% →這段更改了文字大小,標準的文字大小是100% 可以字行放大或縮小喔! 文字顏色更改 color:#000000→這個地方就是更改文字顏色,米酒提供色碼表供大家改變色彩喔 ^^ 色碼表連結:http://user.infor.org/~ohb/colorcode.htm <------點擊進入色碼表頁面 附註:小米酒提供的語法最後一行,可以加上font-family:標楷體,範例如下。 #yblast .text{color:#000000;font-family:標楷體;font-size:150%;} 加入字體指令font-family:標楷體;可以改變字型,任何字型都可以, 但若對方電腦沒有您設的字型,觀看時還是細明體喔! (opacity:100) →調整招呼語框透明度 0→全透明 100→不透明 接下來,小米酒就要教大家,怎麼將招呼語框設置在自己的部落格裡啦 ^Q^ 首先,按管理部落格,【一】面板設定【二】選擇自訂樣式【三】將複製的語法貼在CSS欄位裡 至於找到的招呼語框樣式,怎麼知道他的圖檔網址在哪呢?又怎麼看他的寬與高尺寸多少呢? 請看以下的圖檔說明喔! (要先對找到的圖檔用滑鼠對準圖檔按右鍵才會出現下圖唷!)
還有問題隨時歡迎再來問小米酒 ,米酒會竭盡所能會大家解答的。
PS:簽名檔連結到米酒部落格,還有很多台灣奇摩部落格的怖置語法教學 ^Q^
教學相當清楚~
還有圖片&文字的說明~相信大家應該都學得會吧!!
留言列表