分析W3C 的官方網站的超連結交互性

摘要： 超連結是網頁中，必不可少的內容。 超連結的交互設計，也是一個網頁中最重要的細節。 CSS 也為連結準備了幾個偽類別選取器，用來設置超連結的交交互操作。 但是在絕大多數網站中，我們

超連結是網頁中，必不可少的內容。 超連結的交互設計，也是一個網頁中最重要的細節。 CSS 也為連結準備了幾個偽類別選取器，用來設置超連結的交交互操作。 但是在絕大多數網站中，我們看到的超連結交互樣式，通常是：改變一下連結的顏色、取消或者增加底線、點選連結文本變色或者底線消失等等。 但實際上，超連結的交互設計，並非只能這麼簡單。

W3C 的官方網站的超連結交互性不錯，而且突破常規，下面我們來分析一下。 下圖是超連結交互性操作，當然推薦直接去 W3C 官方網站看效果。

實現原理和分析

首先，仍然是常規的超連結樣式，帶一條底線，但是與普通的超連結樣式不同的是，這條底線要粗(2px 普通的 1px)，同時這個底線和文字顏色不同(用 color 和 text-decoration 定義的超連結底線顏色是和文本相同的)。 所以可以肯定，這個底線是使用 border-bottom 屬性定義的，並且 padding-bottom 了幾個圖元，空開一定距離。 然後交互性操作就很簡單了，只需要改變一下底邊框的顏色就可以了。 當點擊事件發生的時候，超連結不是簡單的改變了顏色，而是向下移動了幾個圖元，這樣給人的錯覺就是按下去了一樣。 關於這個的實現，需要使用 position 的 relative 屬性，啟動 top 屬性，即可讓超連結脫離原來位置向下偏移一定距離。

既然原理分析完畢，那麼我們就開始寫出相應代碼吧。

HTML 結構

隨便輸入一些字，加上個連結就OK了。

這裡是 **** 隨便打的一些字，用來做連結交互樣式的演示，連結在這裡.

CSS 樣式

div { width:300px; margin:20px auto; line-height:24px; }

div a{ text-decoration:none; color：#000; padding-bottom:1px; }

div a:link， div a:visited{ border-bottom:2px solid #f00; }

div a:hover{ border-bottom:2px solid #00f; }

div a:active{ border-bottom:2px solid #00f; outline:0 none; position:relative; top:1px; }

對 div 的寬度定義只是為了好看而已，對行高的定義，是為了不讓底線影響到下一行文字，這個可以自己決定。 然後先對 a 標籤取消預設的底線和顏色，再就是交互性的操作。 注意，對 :active 使用了 outline 屬性，防止有些瀏覽器在點擊超連結的時候，超連結會出現邊框。

發散思維

既然是用了邊框的方式類比底線，那麼可不可以通過調整超連結的高度讓這條線變成一條可以交交互操作的 「刪除線」 呢?當然是可以的，我們只需要把 height 屬性調小一點同時還需要讓 a 的 display 屬性變成 inline-block ，就可以讓邊框穿過文字，由於 overflow 的預設屬性是 visible 所以文本仍然是可見的。

div a{text-decoration:none;color：#000;padding-bottom:1px;height:6px;display:inline-block;}

這樣就實現了下圖效果

需要注意的是 a 元素是行間元素，直接對其使用 height 是沒有作用的，但是對其加上 display：block 變成塊元素，則會脫離文本，所以需要添加 inline-block 屬性。 但是這樣，對於早期的 IE 瀏覽器相容性不太好。

製作這樣一個超連結的交互樣式非常簡單，而且交互效果很不錯，平時我們應該多一點細心和發散思維，才能不斷提高使用者體驗。