Dear we crossed day. Now online.

實在是受夠了一塵不變又單調的文字頁面!!
總是希望在寫文章時能多一點與眾不同,現在,
教你簡單幾個小步驟就能讓文章變得很有色彩。



只要利用CSS來自定不同的文字底線,就可以讓文字更顯目;

我是範例 我是範例 我是範例 我是範例

請在CSS樣式設計精靈最底部,加上以下語法;

.abcdefg{
line-height:22px; padding:4px 2px 2px 0px;
letter-spacing:2px;
background:url(圖片網址) repeat-x bottom
}

紅色的部份是你可以自訂的名稱,記得(.)要留者
如果要設定多個底線圖,自訂的名稱也要跟者更改。




要在文章上加入底線的話,請切入 HTML 編輯器,加上以下;

<span class="自訂的名稱">輸入想要加入底線的文字</span>




文字的部份顯示不同位置,更改數值就ok;

padding:0px 0px 0px 0px; 內的數值是可以移動底線的位置
順序是上》左》下》右,請依照自己的喜好跟底線的高度在自訂名稱內修改。




這是我目前的圖檔,有需要請另存,或者自己動手做也會很不錯;

clolo2.png
db.png
golgy.png
green.gif
hl.gif
mi5.jpg
pink2.gif
ppn.png
RAD1.png
ye.png 





不曉得我寫這樣大家有沒有看懂?有疑問在發問吧XD
尊重自己也尊重別人,請勿隨意轉貼作者的文章。

創作者介紹

I'm Albee 阿比❤

Albee 發表在 痞客邦 PIXNET 留言(28) 人氣()


留言列表 (28)

發表留言
  • miublog
  • 很不錯啊啊啊!送你GPXDDD不過這裡不是巴哈~CC
  • 沒關係,改成你的激吻也OK >////<
    (用衛生紙猛擦嘴巴等待中~)

    Albee 於 2009/03/23 01:47 回覆

  • mooling
  • 我一直以為這是在文章內文加背景圖耶
    原來是要這樣設定呀~~~(筆記)
    小瓜瓜說她很喜歡妳這樣耶 -u-
  • 其實我也是以為是+分格線之類的
    可是居然不是耶=口=

    老瓜喜歡這樣啊(害羞)>//////<

    Albee 於 2009/03/23 13:33 回覆

  • aLienraBbit
  • 我之前還在納悶別人怎么弄,
    阿比比就在這個時候分享了~

    難道阿比比知道我想弄么?(大驚)

  • 我之前也是很納悶啊!
    不過終於讓我找到教學了
    希望有幫助到你喔XD

    Albee 於 2009/03/23 13:31 回覆

  • mayaya
  • 我一直很想用看看這個
    但是都不會弄QQ

    我今天來試試看好了
    謝謝比~(/害羞) ←妳知道這個是什麼XD
  • 原本我看蛆兔的教學也是不懂
    後來又自己去找相關文章來看
    所以才生出了這篇簡易文XD

    哈哈,那這樣我也要(/跳舞)

    Albee 於 2009/03/23 13:30 回覆

  • 脆脆兒
  • 阿比比~脆脆兒等很久了啦>///<
    之前一直找都找不到~
    超悶的!!
    你一定是聽到我的心聲吼!!
    太愛你了!!

    然後,我先認真上課XD
  • 恩啊!聽你上次一說
    就馬上做了個教學
    只是現在才發出來XD
    我感受到你的愛了>/////<

    然後認真上課啊!
    偷懶打屁屁喔!

    Albee 於 2009/03/23 13:28 回覆

  • miso05271
  • 我也喜歡這個線...不過是要說我太笨嗎..竟然看不懂這樣 = =

    還有我也知道瑪雅雅在說的(/害羞)是甚麼 !! 哈哈哈 !!!
  • 恩,我很盡量簡單化了XD
    哪裡不懂呢?

    Albee 於 2009/03/23 13:27 回覆

  • 脆脆兒
  • 阿比比,脆兒可以分享嗎 ?
    如果不方便的話~
    脆兒就收藏就好 XD
  • 可以啊!請使用引用功能^////^

    Albee 於 2009/03/23 18:21 回覆

  • newapao
  • 請問可以刻意的轉貼嗎?^^
  • 請善用引用功能(Trackback鈕)喔^////^

    Albee 於 2009/03/23 18:23 回覆

  • miublog
  • 好吧!寶貝我來了(猛擦口水)
    啵~~~~~ˇˇˇ
    怎麼樣?有迷有很蘇胡啊-///-
  • 哎呀!滿臉都是了
    我要趕快拿袋子收集起來
    (這樣好像怪阿姨)
    然後在多來幾下吧!!
    起摸幾捏(日語)

    Albee 於 2009/03/24 00:07 回覆

  • pinkbaby1013
  • 很奇怪
    今天在你的網站掛了一整天
    一直想要看這篇文章的圖片
    但都沒有辦法看
    一直重新整理也是一樣
    明天再來試試好了
    怪怪的....
  • 寶兒是用甚麼瀏覽器呢?
    因為我看是正常的喔!!!

    Albee 於 2009/03/24 10:51 回覆

  • 如雲
  • 喵嗚

    感謝您的教學
    不過我在發文的時候通常很懶得加Orz...
  • 其實阿比有時候也會很懶惰XD

    Albee 於 2009/03/24 10:52 回覆

  • mayaya
  • 吼阿比還拿袋子裝起來= =
    那我有一些鼻涕餛飩順便給妳要不要?
  • 這位太太你在忌妒嗎?
    不然我分一包漾漾的口水給你好了XD
    請放在布拉甲裡面保存喔!!XDD

    Albee 於 2009/03/24 12:56 回覆

  • pinkbaby1013
  • IE7
    現在看有了
    我就知道昨天怪怪的....
  • 恩..所以是你的電腦問題嗎?
    因為我也是用IE7喔!!!
    另一台IE6也是沒問題的^///^

    Albee 於 2009/03/24 12:57 回覆

  • pinkbaby1013

  • 對啊

    沒問題了
    不過這篇文章就是我之前問你的
    要怎麼在文章下加底線...
    真是太開心看到這篇文章誕生了!!
  • 恩!沒問題就好了XD

    那時候其實我還不知道這個方法呢
    只是用分格線來當成底線
    後來有逛到類似的文章
    也剛好有朋友有需求
    所以就發了小小的教學這樣
    希望你看得懂啊@@"

    Albee 於 2009/03/24 13:10 回覆

  • 脆脆兒
  • 阿比比~脆兒弄不出來ˊˋ
    所以沒辦法文章教學..
  • MSN聊。

    Albee 於 2009/03/25 20:27 回覆

  • Judith
  • 不太懂耶
    用了很久
    也用不出來ㄒ^ㄒ
  • 恩恩!說說看哪裡不懂XD

    Albee 於 2009/03/27 22:37 回覆

  • jannifer
  • 我也是用不出來,哈哈 囧
  • 是喔!
    哪裡有問題呢XD ?

    Albee 於 2009/04/05 20:03 回覆

  • jannifer
  • 不知道內
    我就照著語法輸入
    把要給人家複製的語法放到該放的地方
    可是放上文章之後他就會變不一樣的東西 囧
  • 我也有遇過像你這樣的
    明明是第一排需要用底線卻變第二排
    我會建議就是文章全部打完之後
    再用語法來改底線
    比較不會造成語法亂掉的情形

    Albee 於 2009/04/07 10:54 回覆

  • jannifer
  • 回錯地方了 = =


    我是圖出不來 =口=
  • 圖顯示不出來嗎??
    看你圖片是放在哪裡呢?
    放在痞客幫相簿的話
    記得要把權限開放喔!!!!
    還有語法要對
    如果有哪個位置錯了就顯示不出來了 : D

    Albee 於 2009/04/07 10:53 回覆

  • 悄悄話
  • jannifer
  • 我放棄了
    還是用底色就好 T^T
  • 哈,沒關係
    其實多嘗試幾次應該就沒問題了
    當初我看到這的教學也是看不懂,囧

    Albee 於 2009/04/14 13:22 回覆

  • 小熊
  • 謝謝比比!
    好棒的教學呢 :D
  • 不客氣...
    因為你看得懂才是啊XD

    Albee 於 2009/06/05 13:24 回覆

  • 小熊
  • 阿比比
    我想要讓底線不要和字重複
    就是要讓底線在稍微往下移動一點
    要更改哪個數值呢?
  • 嗯嗯!我知道
    只要修改padding:4px 2px 2px 0px;
    順序是上左下右的樣子
    若是你要不遮住到文字
    就把下的數值改大一點就好了
    你自己測試看看喔:)

    Albee 於 2009/06/13 22:24 回覆

  • daybreak12
  • 好棒的教學!
    一直有疑惑為何別人的文章中會出現不同顏色的底線,
    原來是這樣來的啊~
    謝謝你哦!
  • 謝謝你喜歡這個教學啊!
    還很怕別人看不懂呢:)

    Albee 於 2009/07/04 17:35 回覆

  • 悄悄話
  • Wayne Fu
  • 感謝您提供的底線圖案,這樣就不用自己再畫了~~
  • yunlovel
  • 在看你的教學前,我已經看了兩三個部落格的教學,
    結果一直試都沒辦法成功。
    照你的方法後,一下就成功了耶!!!
    超感謝的!!
找更多相關文章與討論