homefavoriteabout royrss feed
archive
categories
來個不一樣的文字底線吧!!
使用樣式表,除了自訂版面風格以外,在很多內容寫作時,也有很好的應用。
使用一點小小的技巧,一樣也可以讓自己的文章變的更出色喔!!
 
很多時候,除了連結時的樣式,大部份的人在自訂自己的版面樣式時都不太愛幫文字加底線,大致的原因是在中文字加上底線後,實在是使得底線貼中文字太近了。
 
於是呢! 這時候就可以用 CSS 來自定不同的文字底線風格,讓要標示的文字更顯目,該有個人特色的就有個人特色:
 
好比說:在文字下方標記毛筆印記,像是『古人』在看書…
 
“這時候就可以使用樣式表創造的小特色”
 
一樣的將樣式寫入自訂的樣式表中,語法如下:
.myunderline {
line-height:22px;
padding:4px 2px 2px 0;
letter-spacing:6px;
background:white url(圖檔路徑) repeat-x bottom
}
圖檔:
 
又或者是:
用手繪的方法畫線,產生個性化的顯目提示
“這時候就可以使用樣式表創造的小特色”
 
.myunderlineHL{
line-height:22px; padding:4px 2px 2px 0px;
letter-spacing:2px;
background:url(圖檔路徑) repeat-x bottom
}

圖檔:
 
紅字部份
.myunderline.myunderlineHL
為自訂的 Class 名稱!!
 
那麼以後在寫文章時,遇到需要特別標示的字句,我們就只要加上
<span class="自訂的Class名稱">需要特別標示的字句</span>
就可以用不一樣的方式將字句給標示出來了!!

(21)
 
謝啦!好用。
 
http://momoge.blogspot.com/2007/09/blog-post_18.html
 
不知道其他介面怎樣,在blogger下,把程式碼最前面那個「.」拿掉的話,代號變成「<自訂的Class名稱>需要特別標示的字句</自訂的Class名稱>」。
 
更方便。
 
請問要怎麼放在google的blog裡?才能用?(我是電腦白痴...)
 
不能說我太聰明(哈) 
ROY教得很好...我試一次就上手
 
Dear 小綠人, 
帥喔! 可以造福粉多人ㄋㄟ! 
 
Dear StickyKid, 
別客氣啦! 用力收好喔!! :p 
 
Dear 玲, 
妳看貼那裡再給我看好不?! ^_^Y 
 
今天剛申請blog~看到你的底線語法我好喜歡~可是我不會用>< 
試了一小時了~都沒看到可愛的底線...
 
好棒的效果啊^___^ 收下嚕
 
我參考你的語法 
弄了一個產生器.....希望會有便利性 
http://texturetext.unet.cc/ 
還有喔 
照片框也有產生器 
http://spaces.msn.com/members/gene7299/Blog/cns!1pAcW0T8ZlSwoXd4sFC7C_1A!2755.entry 
根據你的語法改成MSN Spaces上可用的模式 
然後國良兄..弄成一個產生器 
不知道你有沒有看過...^^" 
你提供很好的CSS想法 
讓我很受用喔...^^ 
 
Dear nini, 
妳指的 title 是那裡呢! 
因為我不是用無名的...所以不是很清楚ㄋㄟ 
可以說明白點嗎! ^_^||
 
這招真是好用啊~~ 馬上用.. 感激感激~ 最近還是有小問題, nini不會控制title中 字跟圖的位置.. >_<|||
 
哈囉! PG,
真是謝謝誇獎ㄋㄟ! 這樣我又會高興一整晚了! :p
要常來喔! 我也會常去你家喔!~
 
HI ROY,你教的css易懂易用,讓小弟獲益良多。
要做到出色,可是費了不少心機吧?加油噢。
 
HI! 藍魚,
妳客氣了! 是妳不嫌棄啦...只要是能讓妳用上的都盡管取用喔!!
更別說是把我加到妳的連結,謝的來不及了....怎麼會不方便呢! :p
妳的 blog 也挺不錯的喔! b
ㄝ!~妳家的西施姑娘超可愛呢!!
我家DODO也綁過像西施一樣的髮型說~^_^
 
呵呵!被我挖到寶貝哩
不小心一直逛,逛到這來
突然發現原來我要的老師在這裡呀!
之前都是自己土法煉鋼,現在有地方可以學了
真好!謝謝老天讓我找到你!
不好意思!一高興忘記你不認識我哩
我叫藍魚,一個網路幼幼班的學生
自己也摸了一個 blog
也因為太高興,所以把你這善自加入我的連結了!
如果有任何不便,請讓我知道!!!!感恩!
 
Dear Quawn,
我去看過了,我覺得是你客氣啦!~
你網站本來就很具風格呢!! b^_^d
歡迎常來聊聊喔!!!
 
Dear Rowboy:
感謝你的小技巧,讓小弟的家增色不少..
謝謝!!
也歡迎參觀我使用後的樣子
http://www.oui-design.com/parfrey/
 
Dear 餅乾夾心,
您客氣啦! 儘管拿喔! 別客氣! 真的!
倒是能被用上才是超感動呢!!
 

還有喔! 妳人真好ㄝ! 我看到妳把我這介紹到貴網站上了!
喔~又是一陣感動到不行.....
 
嗨Roy
我也覺得你的這個好可愛
我把它copy 放到blog網站上了http://blog.sina.com.tw/blog/
如果覺得不妥 煩請告知我一下唷 謝謝
 
ㄝ! 那得趕到你那裡去恭賀一下囉!
馬上到! 咻~!
 
Roy我今天生日喔~
四年一次的!
跟主題無關Sorry=p
 
Dear Emily,
妳這就客氣啦! 儘管拿! 別客氣喔!
能讓妳用的上才是我的福氣呢!! \^__^/
 
好可愛喔!! copy 起來, copy 起來~~~ ^__^