<< 珠寶裡的情話 | 回blog首頁 | [影片]ReBoot >>

December 10,2006

調整和方便閱讀有關的樣版


記錄一下最近調整的幾項和方便、舒適閱讀有關的CSS版型

  • 加入縮寫字虛線
    CSS語法： acronym { border-bottom: 1px dotted black; }

    功用是讓 IE6.0 能夠正確顯示使用「acronym」標籤標記的縮寫字下方出現虛線，Firefox、Safari則會自動顯示。

    HTML語法：＜acronym title="Cascading Style Sheet"＞CSS＜/acronym＞，效果：CSS

    讀文章的時候如果遇到一堆不是很熟悉的英文縮寫很容易讓人搞不清作者在講些什麼，所以最好能夠適時的加入這個標籤，不會破壞版面又可避免雙方雞同鴨講。

    Acronym Finder：縮寫查詢網站。



  • 重點文字加底線
    CSS語法：.underline {
    line-height:22px;
    padding:4px 2px 2px 0;
    letter-spacing:2px;
    background:url(底線圖片網址) repeat-x bottom
    }

    功能是讓需要加強語氣的重點句子顯示黃色的波浪底線。

    HTML語法：＜span class="underline"＞這是重點＜/span＞，效果：這是重點。


  • 附加說明
    CSS語法：.hint { COLOR: grey; FONT-SIZE: 10px; }

    把要額外補充的字縮小並且變灰色。

    HTML語法：我是重點＜span class="hint"＞（這是補充）＜/span＞，效果：我是重點（這是補充）。


我覺得在撰寫文章的時候要時時謹記文章的版面是否舒適好讀，尤其是經過不同的系統平台瀏覽之後，每個人所看到的都有可能產生程度不一的誤差，如果自己無法在不同的平台做測試，那最簡單的方法就是找機會問問來訪的客人，聽聽他們有哪些可以加以改進的建議！^^

老生常談：
打造親和力的網站
Blogger你的文章好讀嗎？

Posted by appleseed0323 at 樂多Roodo! │14:46 │回應(5) │引用(0) │站務管理
樂多分類：網路/3C 共同主題：Blog的blog紀錄 工具：加入樂多書籤│編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2557065
回應文章
HTML語法：＜span class="underline"＞這是重點＜/span＞

這個不能用呢～請問是什麼原因無法出現不規則的彩色底線
Posted by 酷波 at December 10,2006 20:40
酷波，你有把那個底線的圖檔放在網路空間嗎？
CSS的版型要記得加語法進去喔！
Posted by appleseed at December 10,2006 23:35
請問那邊可以抓這個波浪底線，你的網頁我抓不下來，那邊可以download?謝謝
Posted by 酷波 at December 11,2006 17:00
圖片在這邊^^
http://blog.roodo.com/appleseed/a9a78542.gif
Posted by appleseed at December 11,2006 18:19
奇怪，還是不行，我把這段貼到Roodo裡面還是沒有出現

.underline {
line-height:22px;
padding:4px 2px 2px 0;
letter-spacing:2px;
background:http://static.flickr.com/130/319678969_7dd391df73_o.gif repeat-x bottom
}

這是重點
Posted by 酷波 at December 12,2006 00:49
  


回最上方