阿啾的濕樂園

其實這篇文章早在2009年就寫好了....(感覺2009年好像已經是明末清初的事惹....)(點菸)

當時純粹只是想做個記錄，以便日後我心血來潮想讓自己網誌文章花俏一點的時候，可以從我不大的腦容量裡喚回一點記憶...

不過，因為那天有捧油問我，所以我就把這個簡單幾個小步驟就能讓你的網誌文章變花俏的CSS語法告訴大家吧～   

(說的好像是我自己研究出來的..... 其實是參考網路上各種教學而來的......)

  第一步

請先蒐集各種你想要的底線樣式，然後上傳到你的相簿

分享幾個我蒐集來的，大家可以右鍵另存新檔後，再上傳到自己的相簿

   

   

   

   

  

 

  第二步

上傳到網路相簿後 (這裡以pixnet的網路相簿為例)，要記下圖片的網址

這裡的網址，指的不是你點開相簿，馬上出現在瀏覽列的那行網址

↓ ↓ ↓不是這個!!

 

要怎麼知道網址呢？

來～ 看這邊! 滑鼠右鍵後選在新分頁開啟影像 (這是以google瀏覽器為例，如果你用ie或firefox，請選類似意思的～)

 

然後你就可以得到相片網址了！

登稜～ 就是這個！

 

  第三步

然後，去樣式管理→自訂樣式→CSS原始碼編輯，在所有語法的最下面加上這段語法

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

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

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

  紅色的部份是你可以自訂的名稱，記得 . 要留著，自訂的名稱只能用英文～ 如果要設定多個底線圖，自訂的名稱也要跟者更改。

設定好之後，就像這樣

到這裡，就算大功告成了～ (可以準備開始灑花了!!)

 

  第四步

之後如果要在文章上加入底線的話，請在發表文章處選HTML (不要選切換編輯器)，然後加入以下的語法：


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

 

以下就讓我棉來測試看看吧！

 

以下就讓我棉來＜span class="redline"＞ 測試看看 ＜/span＞吧~

以下就讓我棉來測試看看吧～

 

 以下就讓我棉來＜span class="yellowline"＞測試看看＜/span＞吧~

以下就讓我棉來測試看看吧～

 

 以下就讓我棉來＜span class="reddot"＞測試看看＜/span＞吧~

以下就讓我棉來測試看看吧～

 

 

  第五步

是不是就是這麼簡單!!

打完收工，下課一鞠躬～ 掰掰