CSS拒絕單調讓網頁超連結擁有多姿多彩的下劃線

css拒絕單調讓網頁超連結擁有多姿多彩的下劃線

**:動態網製作指南 .knowsky.***

css本身沒有直接提供變換html鏈結下劃線的功能，但只要運用一些技巧，我們還是可以讓單調的網頁鏈結下劃線變得豐富多彩。

一、基本原理

首先，自定義html鏈結下劃線的第一步是建立乙個圖形，在水平方向重複放置這個圖形即形成下劃線效果。如果要顯示出下劃線背後的網頁背景，可以使用透明的.gif圖形。

其次，如果下劃線圖形的高度較大，則必須適當增加文字的高度，使得一行文字的底部與下一行文字的頂部之間有較大的空間，例如p 。

src="http://.yesky.***/imagesnew/software//0407/26/css/ex.htm" frameborder="0" width="500" scrolling="no" height="120">自定義鏈結下劃線示例

第三，為顯示出自定義的下劃線，必須隱藏預設的下劃線，即a 。

第四，為鏈結元素設定下劃線圖形，構造出自定義的下劃線。假設下劃線圖形是underline.gif，則設定下劃線圖形的css**為a 。

第五，我們要讓下劃線圖形在水平方向反覆出現，但不能在垂直方向重複出現，否則它將被隱藏到文字的背後。要求下劃線只在水平方向重複出現的**為：a 。

第六，為保證圖形出現在鏈結文字的下方（不管字型的大小），用background-position屬性將圖形放在鏈結元素的底部。對於箭頭之類的下劃線圖形，可能還要考慮圖形在水平方向的對齊方向。假設要將下劃線圖形放在右下角，css**為：a 。

第七，為了在鏈結文字的下方給自定義圖形留出空間，必須加入適當的空白。下劃線圖形相對於鏈結文字的具體位置與文字的大小有關，但一般而言，可以先讓底部空白等於下劃線圖形的高度，必要時再作調整。例如：a 。

第八，由於下劃線圖形放在鏈結元素的底部，必須保證鏈結不折行（如允許鏈結跨越多個行，則只有下面一行的鏈結文字下面會有自定義的下劃線）。用css的white-space屬性可以防止鏈結文字折行，即a 。

綜上所述，為鏈結元素定義css樣式屬性的完整例子如：

a a

a:hover

二、例項欣賞

假設有兩個下劃線圖形diagonal.gif（波紋線）、flower.gif（花朵）前者的高、寬是3、9，後者的高、寬是11、15。下面是乙個設定兩種下劃線的完整例項：

src="http://.yesky.***/imagesnew/software//0407/26/css/ex.htm" frameborder="0" width="500" scrolling="no" height="120">自定義鏈結下劃線舉例

網頁源**如下：

注：diagonal.gif　和　flower.gif已經先拷貝到網頁所在的同一目錄下。

例項：波紋線靜態下劃線，

滑鼠停留時出現的波紋線。

花朵靜態下劃線，

滑鼠停留時出現的花朵下劃線。

CSS拒絕單調 讓網頁超連結擁有多姿多彩的下劃線