官網(wǎng)超鏈接交互樣式設計與實(shí)現方式發(fā)布者：本站     時(shí)間：2020-05-21 20:05:22

實(shí)現原理和分析

首先，仍然是常規的超鏈接樣式，帶一條下劃線(xiàn)，但是與普通的超鏈接樣式不同的是，這條下劃線(xiàn)要粗（2px 普通的 1px），同時(shí)這個(gè)下劃線(xiàn)和文字顏色不同（用 color 和 text-decoration 定義的超鏈接下劃線(xiàn)顏色是和文本相同的）。所以可以肯定，這個(gè)下劃線(xiàn)是使用 border-bottom 屬性定義的，并且 padding-bottom 了幾個(gè)像素，空開(kāi)一定距離。然后交互性操作就很簡(jiǎn)單了，只需要改變一下底邊框的顏色就可以了。當點(diǎn)擊事件發(fā)生的時(shí)候，超鏈接不是簡(jiǎn)單的改變了顏色，而是向 下移動(dòng)了幾個(gè)像素，這樣給人的錯覺(jué)就是按下去了一樣。關(guān)于這個(gè)的實(shí)現，需要使用 position 的 relative 屬性，激活 top 屬性，即可讓超鏈接脫離原來(lái)位置向下偏移一定距離。

既然原理分析完畢，那么我們就開(kāi)始寫(xiě)出相應代碼吧。

HTML 結構

隨便輸入一些字，加上個(gè)鏈接就OK了。

這里是 **** 隨便打的一些字，用來(lái)做鏈接交互樣式的演示，<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 的寬度定義只是為了好看而已，對行高的定義，是為了不讓下劃線(xiàn)影響到下一行文字，這個(gè)可以自己決定。然后先對 a 標簽取消默認的下劃線(xiàn)和顏色，再就是交互性的操作。注意，對 :active 使用了 outline 屬性，防止有些瀏覽器在點(diǎn)擊超鏈接的時(shí)候，超鏈接會(huì )出現邊框。

發(fā)散思維

既然是用了邊框的方式模擬下劃線(xiàn)，那么可不可以通過(guò)調整超鏈接的高度讓這條線(xiàn)變成一條可以交互操作的 “刪除線(xiàn)” 呢？當然是可以的，我們只需要把 height 屬性調小一點(diǎn)同時(shí)還需要讓 a 的 display 屬性變成 inline-block，就可以讓邊框穿過(guò)文字，由于 overflow 的默認屬性是 visible 所以文本仍然是可見(jiàn)的。