2012年5月7日 星期一

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 一併帶走!


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

16 則留言 :

  1. 謝謝分享啊! 祝母親節快樂!
    [版主回覆05/08/2012 10:34:59]早晨, 也祝你母親節快樂啊!

    回覆刪除
  2. 晚上好Akina!又有新作喇!
    [Joe回覆05/08/2012 22:36:44]努力,加油!bloger有福了。
    [版主回覆05/08/2012 20:58:54]Joe 晚上好! 最近都在執線, 令版面清一些 ^^

    回覆刪除
  3. 抱走了,慢慢玩
    [版主回覆05/09/2012 10:53:48]好呀! 最近在度怎減省語法、多的空間呀! 祝母親節快樂! ^^

    回覆刪除
  4. Hi Akina Happy Mother's Day ~~
    很實用的新作,謝謝分享
    [版主回覆05/09/2012 18:02:29]母親節快樂! 改了這條線好看好多啊 !

    回覆刪除
  5. 母親節快樂 ~~
    [版主回覆05/09/2012 18:03:29]Same to you la ! ^^

    回覆刪除
  6. 母親節快樂!
    [版主回覆05/10/2012 08:31:48]早晨! 也祝你母親快樂呀!

    回覆刪除
  7. 謝謝分享!好叻...我還不懂...要慢慢學!
    [版主回覆05/10/2012 08:32:34]母親節快樂 ^^ 有時間慢慢學囉!

    回覆刪除
  8. 您好....晚安...謝謝分享呀....
    您這條分隔好靚...
    祝母親節快樂.....
    [版主回覆05/10/2012 08:34:21]早晨! 分隔線用到就好! 祝母親節快樂 ^^

    回覆刪除
  9. Akina,收藏了這語法啦!
    [版主回覆05/10/2012 08:36:05]早晨 語法用去就好啦! ^^

    回覆刪除
  10. 來說聲..母親節快樂 ! 每天要開心喔。
    [版主回覆05/10/2012 18:55:05]母親節快樂! 要温馨過啊!

    回覆刪除
  11. 祝母親節快樂!
    [Joe回覆05/11/2012 21:42:12]大家天天愉快!
    [版主回覆05/11/2012 10:45:08]祝週未愉快! ^^

    回覆刪除
  12. 祝好朋友母親節愉快!母親節有沒有好節目呢?
    [wtm246回覆05/13/2012 00:33:19]I'm sorry! Be optimistic!
    [版主回覆05/11/2012 10:45:58]我母巳不在 .. 多謝問候 ^^

    回覆刪除
  13. 探望Akina
    想問這個語法做出來的效果是怎樣的?
    [版主回覆05/11/2012 10:49:35]早晨, 思璃! ^^ 你按頭頂梳化下的 Post 就會看到我現用的迷你星星分隔線了! 粗邊的如圖示範呀!

    回覆刪除
  14. 朋友:你好!母親節快樂!週日快樂!
    [版主回覆05/13/2012 09:57:40]母親節快樂! 週日愉快 ^^

    回覆刪除
  15. 好一段一日子沒看 blog 教學,怎麽我腦袋塞了??不能一次看明白呢?!我還是引用回去,日后再學好了!謝謝分享!
    [版主回覆05/14/2012 10:26:58]我最近在砌自己的版呢 寫 Css 好像分了心啦!

    回覆刪除
  16. 雅姬蘭 朋友:謝分享....謝無私教學

    回覆刪除