利用CSS自定義網頁超連結下劃線樣式

2021-08-23 15:26:28 字數 743 閱讀 9233

巧妙利用css自定義網頁下劃線樣式

實現方法很簡單,在源**的和之間加上如下的css語法控制:

text-decoration: none;

background: url(underline.gif) repeat-x 100% 100%;

padding-bottom: 4px;

white-space: nowrap;

}還記得有些超連結文字沒有下劃線,但是當滑鼠移到它的上面的時候,下劃線就浮現出來的情況麼?自定義的下劃線也可以做到這個效果,那就在:hover上設定超連結背景,而不是在超連結標記a上設定,如下:

a

a:hover

怎麼樣,是不是很簡單呢?在來看看一些例子和它們對應的css設定:

靜態下劃線

a#example3a

浮動效果下劃線

a#example3b

a#example3b:hover

靜態下劃線

a#example4a

浮動花朵效果下劃線

a#example4b

a#example4b:hover

靜態箭頭下劃線

a#example1a

浮動動畫箭頭下劃線 (這裡箭頭會出現滾動,不過這一滾動的效果只在部分瀏覽器中看得到)

a#example2b

a#example2b:hover

巧妙利用CSS自定義網頁下劃線樣式

css為網頁設計者們提供了豐富而靈活的頁面元素表現形式的控制手段。但是,或許你可能注意到了,對於下劃線,css提供的可選操作卻不是很多。一般情況下,人們看到的下劃線基本上都是橫直線,缺少生氣和靈動。不過,路並不是死的,通過一些絕妙的改造,我們還是可以做出富有創意的下劃線來使頁面更為美觀。這是乙個自定...

全網頁CSS 超連結無下劃線

在乙個網頁中有若干對文字a超連結錨文字,但預設情況下帶鏈結文字是有下劃線效果的。如何使用css實現超連結無下劃線樣式呢?通過css設定要想讓帶超連結錨文字字型文字預設下劃線消失,我們需要css樣式單詞text decoration去掉下劃線。具體去掉全網頁預設鏈結下劃線實現無下劃線css 如下 a ...

超連結自定義協議(可以傳值)

超連結自定義協議 可以傳值 vb原始碼 private sub form activate dim a as string dim b as string text1.text command a split text1.text,print a 0 a 1 b split a 1 print b ...