自定多姿多彩的網頁連結下劃線(轉)[@more@]

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

　　一、基本原理

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

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

自定義連結下劃線示例

　　第三，為顯示出自定義的下劃線，必須隱藏預設的下劃線，即a { text-decoration: none; }。

　　第四，為連結元素設定下劃線圖形，構造出自定義的下劃線。假設下劃線圖形是underline.gif，則設定下劃線圖形的CSS程式碼為a { background-image: url(underline.gif); }。

　　第五，我們要讓下劃線圖形在水平方向反覆出現，但不能在垂直方向重複出現，否則它將被隱藏到文字的背後。要求下劃線只在水平方向重複出現的程式碼為：a { background-repeat: repeat-x; }。

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

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

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

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

　　a {

　　　text-decoration: none;

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

　　　padding-bottom: 4px;

　　　white-space: nowrap;

　　}

　　如果要讓自定義下劃線只在滑鼠停留時出現，只要把原來直接設定在連結元素上的CSS background屬性改到:hover ，例如：

　　a {

　　　text-decoration: none;

　　　padding-bottom: 4px;

　　　white-space: nowrap;

　　}

　　a:hover {

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

　　}

自定多姿多彩的網頁連結下劃線(轉)

相關文章