2011年3月13日 星期日

[blogspot]文章加上重點底線


我想在BLOG上劃重點,但又不想要只讓文字呈現顏色的區分.想要在文字底下劃上不一樣的底線,以增加閱讀的樂趣。

可以跟著[Blog語法研究室 ]動手做看看。



]嘗試著做做看。



1) 取得底線的圖檔,也可以自己畫。




要 gif 格式喔,而且要設定底色為透明。這裡先提供一個粉紅色底線的圖
檔,有需要的可以在這個圖示上面pink1_underline按滑鼠右鍵另存圖檔,也希望你可以自己畫出你自己的底線。




2) 將圖檔放到網路可以讀取的地方。



3)選取【版面配置】或【設計】,然後點選【修改HTML】,記得先下載備份完整範本。



然後在「修改範本」中找到【body{…}】,在其前面加上一段程式碼。



  • 其中
    【PINK_UNDER】就是關鍵字,可以自訂,這裡的大小寫必須完全正確,也就是說後面引用的時候,必須跟這裡所定義的大小寫一模一樣。


  • 【http://…】所跟著的網址要指到底線圖檔所擺放的網路空間。












.PINK_UNDER
{

text-decoration: none;

background:
url(
http://i607.photobucket.com/albums/t7/BlogScriptStudy/pink_underline.gif) repeat-x 100% 100%;

padding-bottom:
0px;

}



4)用法

比如說這段文字的【粉紅色底線】要加底線,就
要寫成



比如說這段文字的【class="PINK_UNDERLINE">粉紅色底線</span>】要加底線










Related Posts:

  • CSS - boxNewComment1#boxNewComment {}/* 最新的回應 */#boxNewComment .boxNewComment0 {}#boxNewComment .boxNewComment0 .sidetitle {}#boxNewComment .boxNewComment1 {}#boxNewComme… Read More
  • CSS - boxSearch#boxSearch {display: none;}/* 搜尋這個網誌的文章 */#boxSearch .boxSearch0 {}#boxSearch .boxSearch0 .sidetitle {}#boxSearch .boxSearch1 {}#boxSearch .boxSearch1… Read More
  • CSS - Text-decoration:nonea {color:#333;text-decoration:none;}a:hover {color:#004393;text-decoration:none;}/*a 所有的連結都不要有底線 (text-decoration:none;)a:hover 當滑鼠移到連結的時候,也不要有底線.適用頁面… Read More
  • CSS - Color ChartThere have many color code at this WEB site.Please reference ithttp://htmlhelp.com/cgi-bin/color.cgi… Read More
  • CSS - calendar/* .calendar {}/* 行事曆 */*div.calendar {color:#8A2BE2;background:url(http://l.yimg.com/e/style/14/1484/calendar.jpg) repeat-x left top;padding:15px 5px… Read More

0 意見:

張貼留言