分享W3C官網超連結互動樣式設計與實現方式

來源:互聯網
上載者:User

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

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

實現原理和分析

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

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

HTML 結構

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

這裡是 **** 隨便打的一些字,用來做連結互動樣式的示範,<a href=“#”>連結在這裡</a>.

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 瀏覽器安全色性不太好。

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

文:我愛水煮魚

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。