Google Blog 多采多姿的文字底線樣式

爲了加強文章的可讀性，通常會在文字底下加上傳統的底線來表示文章中的重點，不過這樣顯得單調許多。所以andrew看有些部落格加上各式各樣的底線，就豐富很多，也比較能夠真正將關鍵字引起讀者的注意，像這種，或這種，還是這種，都突顯出文中的重點及增加可讀性，也顯得與眾不同許多，今天就來介紹一下
##CONTINUE##
1.取得文字底線圖檔
2.上傳到可以直接用網址瀏覽到的網路空間，andrew是上傳到Google Page Creator所提供的100mb網路空間

3.登入google blog -> 資訊主頁 -> 版面配置 -> 修改HTML，找到

]]></b:skin>

在上述語法之前貼上以下語法後儲存，圖片網址則是改成格友自己的上傳後網址，圖片檔名是要去掉附檔名的，有幾個樣式就貼幾個

/* for 文字底線樣式 start*/
.圖片檔名 {
  background:url("圖片網址") repeat-x 120% 100%;
  text-decoration: none;
  padding:0 3px;
  padding-bottom: 3px;
  }
/* for 文字底線樣式 end*/

5.使用時，依照下列語法即可

 <span class="圖片檔名">要加底線的文字</span>

6.測試一下
要加底線的文字
要加底線的文字
要加底線的文字
要加底線的文字
要加底線的文字

大功告成，以後就有很多底線樣式可以用囉！

參考資料：兔子的網誌

相關文章 :