網頁超連結在大部分的瀏覽器預設都是有底線的，目的是用來清楚表示那是連結與一般內文的差異，隨著網頁的風格演進，這樣的呈現方式早已不能符合所有的網頁設計風格，有些設計師會將預設的底線隱藏，本篇將透過 CSS 的 text-decoration 設計沒有底線的超連結，共分為兩種做法，單獨隱藏網頁中某一條超連結的底線以及一次管理整個網頁的超連結底線，所有主流的瀏覽器都支援這兩種 CSS 計巧。
範例一、隱藏單一超連結底線
範例二、隱藏整個網頁的超連結底線
範例一、隱藏單一超連結底線
<a href="#" style="text-decoration:none;">隱藏超連結底線範例</a>
以上範例輸出結果
範例一的做法比較單純，屬於一次處理一條連結的方式，雖然這個方法比較花時間，卻是瀏覽器優先選擇的顯示方式，例如將整個網頁的超連結透過 CSS 語法規定都要顯示底線，設計師依然可以透過這個方法單獨將其中一條的底線隱藏，缺點是無法呈現滑鼠移經自動出現底線的效果，若有這樣的需求，可以參考此篇：用 CSS 設計當滑鼠移經超連結時才顯示底線。範例二、隱藏整個網頁的超連結底線
<style>
a {
text-decoration:none;
}
</style>
<a href="#">隱藏超連結底線範例</a>
以上範例輸出結果
範例二就屬於整體管理的設計技巧，在 <style> 標籤內規定 a 屬性的所有底線都要隱藏，可以直接全面管理整個網頁的超連結底線，置於隱藏的語法就是『text-decoration:none』這個部分，參數值 none 代表不顯示底線，text-decoration 還有其他種餐數，用來設計出上線、刪除線等效果，若有興趣，請參閱此篇：CSS text-decoration 將有完整的介紹。a {
text-decoration:none;
}
</style>
<a href="#">隱藏超連結底線範例</a>
--------------
沒有留言:
張貼留言