快捷導(dǎo)航

CSS：自定多姿多彩的網(wǎng)頁(yè)鏈接下劃線(xiàn)

更新時(shí)間：2006年09月25日 00:00:00 作者：

CSS本身沒(méi)有直接提供變換HTML鏈接下劃線(xiàn)的功能，但只要運(yùn)用一些技巧，我們還是可以讓單調(diào)的網(wǎng)頁(yè)鏈接下劃線(xiàn)變得豐富多彩。

　　一、基本原理

　　首先，自定義HTML鏈接下劃線(xiàn)的第一步是創(chuàng)建一個(gè)圖形，在水平方向重復(fù)放置這個(gè)圖形即形成下劃線(xiàn)效果。如果要顯示出下劃線(xiàn)背后的網(wǎng)頁(yè)背景，可以使用透明的.gif圖形。

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

自定義鏈接下劃線(xiàn)示例

　　第三，為顯示出自定義的下劃線(xiàn)，必須隱藏默認(rèn)的下劃線(xiàn)，即a { text-decoration: none; }。

　　第四，為鏈接元素設(shè)置下劃線(xiàn)圖形，構(gòu)造出自定義的下劃線(xiàn)。假設(shè)下劃線(xiàn)圖形是underline.gif，則設(shè)置下劃線(xiàn)圖形的CSS代碼為a { background-image: url(underline.gif); }。

　　第五，我們要讓下劃線(xiàn)圖形在水平方向反復(fù)出現(xiàn)，但不能在垂直方向重復(fù)出現(xiàn)，否則它將被隱藏到文本的背后。要求下劃線(xiàn)只在水平方向重復(fù)出現(xiàn)的代碼為：a { background-repeat: repeat-x; }。

　　第六，為保證圖形出現(xiàn)在鏈接文字的下方（不管字體的大?。胋ackground-position屬性將圖形放在鏈接元素的底部。對(duì)于箭頭之類(lèi)的下劃線(xiàn)圖形，可能還要考慮圖形在水平方向的對(duì)齊方向。假設(shè)要將下劃線(xiàn)圖形放在右下角，CSS代碼為：a { background-position: 100% 100%; }。

　　第七，為了在鏈接文本的下方給自定義圖形留出空間，必須加入適當(dāng)?shù)目瞻住Ｏ聞澗€(xiàn)圖形相對(duì)于鏈接文字的具體位置與文字的大小有關(guān)，但一般而言，可以先讓底部空白等于下劃線(xiàn)圖形的高度，必要時(shí)再作調(diào)整。例如：a { padding-bottom: 4px; }。

　　第八，由于下劃線(xiàn)圖形放在鏈接元素的底部，必須保證鏈接不折行（如允許鏈接跨越多個(gè)行，則只有下面一行的鏈接文本下面會(huì)有自定義的下劃線(xiàn)）。用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;
　　 }

　　如果要讓自定義下劃線(xiàn)只在鼠標(biāo)停留時(shí)出現(xiàn)，只要把原來(lái)直接設(shè)置在鏈接元素上的CSS background屬性改到:hover ，例如：

　　a {
　　　 text-decoration: none;
　　　 padding-bottom: 4px;
　　　 white-space: nowrap;
　　 }

　　a:hover {
　　　 background: url(underline.gif) repeat-x 100% 100%;
　　 }

　　二、實(shí)例欣賞

　　假設(shè)有兩個(gè)下劃線(xiàn)圖形diagonal.gif（波紋線(xiàn)）、flower.gif（花朵）前者的高、寬是3、9，后者的高、寬是11、15。下面是一個(gè)設(shè)置兩種下劃線(xiàn)的完整實(shí)例：

自定義鏈接下劃線(xiàn)舉例

　　網(wǎng)頁(yè)源代碼如下：
　　注：diagonal.gif　和　flower.gif已經(jīng)先拷貝到網(wǎng)頁(yè)所在的同一目錄下。

　　a#example1a {
　　 text-decoration: none;
　　 background: url(diagonal.gif) repeat-x 100% 100%;
　　 white-space: nowrap;
　　 padding-bottom: 2px;
　　 }

　　a#example1b {
　　 text-decoration: none;
　　 white-space: nowrap;
　　 padding-bottom: 2px;
　　 }

　　a#example1b:hover {
　　 background: url(diagonal.gif) repeat-x 100% 100%;
　　 }

　　a#example2a {
　　 text-decoration: none;
　　 background: url(flower.gif) repeat-x 100% 100%;
　　 white-space: nowrap;
　　 padding-bottom: 10px;
　　 }

　　a#example2b {
　　 text-decoration: none;
　　 white-space: nowrap;
　　 padding-bottom: 10px;
　　 }

　　a#example2b:hover {
　　 background: url(flower.gif) repeat-x 100% 100%;
　　 }

　　-->
　　 </style>
　　 </head>

　　<body>

　　<p>實(shí)例：</p>
　　 <p> <a href="#" id="example1a">波紋線(xiàn)靜態(tài)下劃線(xiàn)</a>，
　　 <a href="#" id="example1b">鼠標(biāo)停留時(shí)出現(xiàn)的波紋線(xiàn)</a>。</p>
　　 <p> <a href="#" id="example2a">花朵靜態(tài)下劃線(xiàn)</a>，
　　 <a href="#" id="example2b">鼠標(biāo)停留時(shí)出現(xiàn)的花朵下劃線(xiàn)</a>。</p>

　　</body>
　　 </html>