产品中心

官網超鏈接交互樣式設計與實現方式

2020-05-22 55 作者:沙巴体育怎么玩

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

對div的寬度定義只是為了好看而已,對行高的定義,是為了不讓下劃線影響到下一行文字,這個可以自己決定。然后先對a標簽取消默認的下劃線和顏色,沙巴体育怎么玩再就是交互性的操作。注意,沙巴体育怎么玩對:active使用了outline屬性,防止有些瀏覽器在點擊超鏈接的時候,超鏈接會出現邊框。

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