網誌留言大頭貼加框&樓層加底圖
請將語法貼在css語法最底下即可
/*留言大頭貼圖框*/
.comment_portrait
{width:135px;HEIGHT:180PX;
BACKGROUND:url(圖片網址) no-repeat;
MARGIN:0px;PADDING-TOP:14px;Padding-left:4px;}


語法解說:width:135px;<---------改成你的圖寬HEIGHT:180PX;<--------改成你的圖高BACKGROUND:url(圖片網址) no-repeat;<-------改成你的圖片網址MARGIN:0px;<---------圖框與頭貼靠邊間距PADDING-TOP:14px;<------中間大頭貼往下移動間距Padding-left:4px;<--------中間大頭貼往右移動間距
5/12補充:音符後來想到,中間大頭貼會大小不一,因每個人上傳的頭貼長寬比例不同,所以顯示上就不同,因此加上底下語法,用以將頭貼完全置中填滿框內~.comment_portrait a img{ width:112px;height:147px;)
width:頭貼寬度;Height:頭貼長度;<---視框的中間空白處大小而更改即可~
/*回應樓層數字背景*/
.commentNo{background:url(圖片網址) no-repeat left top;
font-size:14px;display:block;width:67px;height:72px !important;color: #285914;
text-align:center;padding-top:27px;margin:0;float:right;line-height:1.5em;}



 語法解說:background:url(圖片網址) no-repeat left top;<---圖片不重複,靠上靠左font-size:14px;<---------數字大小width:67px;<------------改成你的圖片寬度height:72px;<----------改成你的圖片高度color: #285914;<----------數字顏色色碼text-align:center;<--------數字在圖中置中padding-top:27px;<-----------數字往下移動間距margin:0;<---------數字與圖靠邊距離float:right;數字與圖置右(也可改left)

 

.
創作者介紹

hannah

kdnzms 發表在 痞客邦 PIXNET 留言(0) 人氣()