2008/04/04

就是要不一樣! 幫文字段落加上獨樹一格的底線 underline




在文章中, 碰上想強調的段落時, 除了用粗體, 斜體, 或不同顏色外, 也可以加上底線.

要特製底線, 只要一張底線圖片, 及一段語法, 以後想引用時, 只要用 span 標籤包起來, 就可以呈現了



1.先從以下圖片挑選一張(在圖片上方按右鍵後另存新檔), 上傳到網頁空間後, 取得圖片網址.

圖片一

效果


圖片二

效果


圖片三

效果


圖片四

效果


圖片五

效果


圖片六

效果


2.在 CSS 區塊(或 body{} 之後), 加入此段程式碼.

內容更新:
感謝Mrs.9的建議, 終於解決了white-space: nowrap;在ie下的不正常顯示方法. 為了增進可讀性,已更新所有相關圖片及程式碼.

修改原本就是內建標籤的em 的設定, 這樣在文章中引用時, 就不用打那麼多字(span class="hh"...,只要em), 另外, 為了避免 ie 瀏覽不正常的問題, 加了一行 white-space: nowrap; 不換行的設定(但這個也會產生部份問題, 如過長或影響右邊欄位.因此可考慮是否要加).

em{
background: url(http://圖片網址) repeat-x bottom;
line-height:22px;
font-style:normal;
}

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



3. 以上程式碼就加入完畢了. 如果在寫文章時, 想為某一段文字標上底線, 就在 html區加入
<em>這段文字要加底線</em>

<span class="hh">這段文字要加底線</span>




這樣就大功告成了!

相關文章 :

42 comments:

小妞妞的世界 提到...

哇,才剛剛在想而已
站長馬上就有這樣的教學(線條底線)
真是太感謝囉!!

ps。請問blogspot是否也可以有網友回應可以隱藏的功能呢??

︿︿

γειισω (矛今) 提到...

哈哈哈~ skyvee 被我問了馬上寫教學真是好感動啊XDDD

另外意見可以到意見管理設定,可以設定當有人發意見給您時,您會先收到EMAIL可以再決定是否要公開...

蔡凱文 提到...

又有新的花樣, Skyvee真是厲害~

ForeverFish 提到...

我剛剛發現一個問題,IE7(含內核是IE)的瀏覽器看來,線條會失真(ex:放大網頁 )

也就是說在Opera/FireFox 下看到的網頁跟IE 有可能會是不一樣的。

Skyvee 提到...

小妞妞, 意見隱藏的設定就如矛今所說.另外, 如果想設定某一篇文章沒有回應功能, 可以在寫文章下方的張貼選項設定.

矛今,交流嘛!也謝謝你幫忙回答.幫矛今擦汗 ^^

凱文,只是自己也想用, 所以分享一下囉!而且從大家的回應, 自己反而學到更多呢! ^^

Skyvee 提到...

Foreverfish, 非常感謝提出來, 這是因為圖片三到圖片六, 我都做了背景透明化的處理, 然而在某些瀏覽器下並無法正常顯示已去背的 png 圖檔, 我剛使用了 Firefox ,IE7瀏覽 是正常, 但IE6果然就有問題, 所以已將這些透明背景的圖檔, 全部轉成gif檔. 此問題應已解決. 謝謝你.^^

ForeverFish 提到...

我做了一個測試說明情況,請移駕:

瀏覽器解讀畫面大不同
http://blog.roodo.com/foreverfish/archives/5811469.html

這個問題還蠻大的,用 IE7 跟 FireFox 看的效果完全不一樣。

Skyvee 提到...

Foreverfish, 謝謝你費心弄了篇文章, 把問題指出來, IE 及FF 瀏覽不一致的問題, 有幾個方式可解, 一是加入 換行指令white-space: nowrap; , 另一種是 遇上換行時, 重覆下span class 或 em 的指令. 如果有更好的方法, 歡迎提出討論!^^

ForeverFish 提到...

有一好,沒有二好

試了white-space: nowrap 的結果是

(1)如果部落格右邊有欄位,則後面會被切掉(消失,直接通往虛無)
(2)如果部落格右邊沒欄位,則會變成一直行延伸。

換句話說,除非先把文章段落一行一行斷好,否則在IE看來,就都沒好下場。

Skyvee 提到...

Google了許久, 這問題似乎真無正解. 或許真要期待IE能早日支援這語法.

alice 提到...

看起來很特別~
像小時候讀書"畫重點"的感覺

Skyvee 提到...

愛麗絲,的確就是想要這種感覺,脫離學生生活後, 已捨不得在書上畫線,不過在blog卻可以實現這類效果,倒也不錯!:P

Mrs.9 提到...

我想到的解決方法,原則上應該就可以達到想要的效果。
1.依需求,將「線圖」上面的「空白」加大。
2.再將 repeat-x bottom; 改為 repeat;

Mrs.9 提到...

我想到的解決方法,原則上應該就可以達到想要的效果。
1.依需求,將「線圖」上面的「空白」加大。
2.再將 repeat-x bottom; 改為 repeat bottom;

.post b {
background: url(http://xxx.xxx.xxx/22.gif) repeat bottom;
line-height: 22px;

letter-spacing: 1px;
}
其中 22.gif 為 140x22

Skyvee 提到...

謝謝Mrs.9的分享, 有空的話, 我來實做看看. 另外 看過您的blog, 在IE7下, 部份底線仍有問題, 不知道您是否有發現?

Mrs.9 提到...

我用 fx, ie6, ie7 看的時候都正常啊,不知你指的問題是什麼~
不然就是剛好你在我正在測試的時候連了進來!哈哈!

Skyvee 提到...

mrs.9, 謝謝分享, 經過實作之後, 果然可行, 已更新所有圖片及語法, 十分感謝啊! ^^

ShengWD 提到...

Skyvee大關於em語法我要這樣才正常耶...

em{
background: url(圖片網址) repeat-x bottom;
line-height:22px;
font-style:normal;
}

repeat bottom; 不行
要repeat-x bottom;這樣才可以

ShengWD 提到...

補充一下
repeat bottom; 寫法會有刪除線+底線的效果

而我是使用IE7核心的 Maxthon2 瀏覽器

Skyvee 提到...

ShengWD, 謝謝你的分享,可以讓其他網友參考.我沒有用過Maxthon2, 倒不知道有這樣的差異!

Skyvee 提到...

我試了repeat-x bottom; 及 repeat bottom; , 兩者在IE 下都沒問題, 所以看起來repeat-x bottom; 比較好! 謝謝!

涼鳥 提到...

謝謝skyvee大提供這篇教學,
小弟把它作成msn live writer plugin。
http://coolbirdsss.blogspot.com/2008/06/v10.html
跟skyvee大告知一聲,謝謝。

skyvee 提到...

涼鳥還另外做成plugin, 更方便使用.謝謝你的告知.:)

小束 提到...

真的很棒唷!!
我拿來套用了喔~謝謝你。

Skyvee 提到...

小束,別客氣.很高興你也喜歡. :)

希望特快車 提到...

在 CSS 區塊(或 body{} 之後), 加入此段程式碼.的意思是不是在"修改HTML裡面加上(模板)"這段??任何地方都可以直接貼上嗎?還是要在body{} 之後@@?對這部份不明瞭,

希望特快車 提到...

我會了~另外我在文章做了連結到此文章做分享~希望你會同意@@感謝喔~好玩

Skyvee 提到...

好久不見,近來好嗎? 謝謝你加了連結!文章內多些變化,也蠻好玩的~

小豹 提到...

我的用IE6有碰到換行的話,上面那行的底線出不來@@"

小豹 提到...

我用IE6有換行的話,上面那行出不來
用Firefox則都正常@@~
只能在換行的地方再加上一次語法嗎?

skyvee 提到...

小豹,有些CSS在ie6 是無法運作的..我用ie7看你的文章,底線換行沒問題.

小豹 提到...

恩哼~你看的時候~我已經在換行的地方加上語法了~
小問題XD~3Q~

skyvee 提到...

呵呵,原來如此啊!

Luke 提到...

真是非常别致的效果,感谢分享:)

Skyvee 提到...

luke,不過是互相交流!:)

Waverly 提到...

我試了,可是底線卻沒有出現:(
這段文字要加底線這段文字要加底線應該要把它換成要加底線的文字內容嗎?

Skyvee 提到...

Waverly,首先先把em或是你想定義的標籤寫在CSS區,如果你用的是em{}, 那底線文字要用em 包起來.就像你留言中這樣.

蘋果 提到...

請問版主,如果一篇文章想要多種顏色,這樣該如何設定?

skyvee 提到...

多種顏色, 就用.hh {
background: url(圖片網址) repeat-x bottom;
line-height:22px;
padding:3px 2px 2px 0px;
letter-spacing:1px;
} ,

.hh1{xxx
}

.hh2{xxx
}
然後在文章裡,這麼用.<span class="hh">這段文字要加底線</span>, 
hh,hh1,hh2裡就用不同色, 引用到文章時就能出現不同效果.

王子 提到...

skyvee 兄, 王子找不到 body{} ....其实在那里? =.=""

skyvee 提到...

王子你好,請用關鍵字搜尋 body { , 應該就可以找到了.

WFU 提到...

很不錯,文章的網頁看起來就活潑生動多了!

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.