Post 文章簡介分隔線 高度調較

喜歡原創 不隨波遂流!

如有引用請用原文、留言!

不少網友慣用的自定欄位輸入空間巳經爆滿, 請自行掉配空間! 在其他自定欄位輸入語法, 繼續美化!

 

記得將語法全部加入一個自定欄位放於總共一對 <style></style> 之間包着即可!!

*      *      *

換了版面背景發覺真的明顯有很多格線!    為了好看得去找分隔線裝修一下! 網上資源多的是!

例如到 www.photobucket.com 搜尋欄打 divider 按箭咀即時出現很多漂亮分隔線任選

點擊喜歡圖片看原圖, 往右面下方的 Links 按箭咀, 點擊 Direct link 複制網址備用



接着在 Photo Info 按箭咀看到圖片資訊, 記下高度數字!



用小的分隔線可不限高度  

如像這次找來的花花分隔線高度就有 73 px, 如不用語法調控就會出現下圖情形!



文字與圖片重疊! 不便閱讀! 必須調整!

調較方法是把簡介文字與底部的距離加高, 以遷就分隔線圖的高度! 這樣就清楚好看了!



語法:

/*Post 文章簡介分隔線*/

#article-list .article{padding-bottom:73px;background:url(http://i1209.photobucket.com/albums/cc383/serendipitymairead/pinkflowersdivider.gif) left bottom repeat-x;border-width:0px;}

*      *      *

註解:

padding-bottom:73px ~ 文字與底部距離加高至 73px

background:url(圖片網址) left bottom repeat-x ~ 圖片靠左 貼底部 向橫重覆申延

border-width:0px ~ 刪除框線

***測試、制作及編寫下過心機, 用了時間,
如引用語法或文章資料請連同我 blog Logo  一併帶走!

示範小圖引用自網絡, 為免失鏈, 請上傳到你個人上載空間!