巧妙利用CSS自定義網(wǎng)頁下劃線樣式

CSS為網(wǎng)頁設(shè)計者們提供了豐富而靈活的頁面元素表現(xiàn)形式的控制手段。但是，或許你可能注意到了，對于下劃線，CSS提供的可選操作卻不是很多。一般情況下，人們看到的下劃線基本上都是橫直線，缺少生氣和靈動。不過，路并不是死的，通過一些絕妙的改造，我們還是可以做出富有創(chuàng)意的下劃線來使頁面更為美觀。

這是一個自定義下劃線的例子：自定義的下劃線 。是不是很酷呢？除了能讓你的網(wǎng)頁呈現(xiàn)出一個與眾不同的風(fēng)格之外，它還能對于文檔中不同的文字類型給與不同的視覺外觀，起到提醒或者著重的作用。

下面我們就來一起學(xué)習(xí)如何自定義與眾不同的下劃線。

首先，我們得先準(zhǔn)備一幅作為下劃線的圖片。你可以利用先成的，也可以自己動手繪制。需要提醒注意的是，你所準(zhǔn)備的圖片應(yīng)該適合水平方向上的重復(fù)，最好還能使透明的GIF格式，這樣能夠確保背景不被遮擋。

另外，如果你所準(zhǔn)備的下劃線圖片在高度（粗細(xì)）上占用比較多的像素，那么，應(yīng)當(dāng)增加該行文本和下行文本之間的行距（line-height）空間，可以這么設(shè)定：

p { line-height: 1.5; }

接下來要做的事情是取消原來默認(rèn)的下劃線，這樣我們才能把自定義的下劃線應(yīng)用到指定文本，使用如下的CSS設(shè)定（它的含義是讓超鏈接文字沒有任何修飾）：

a { text-decoration: none; }

好了，現(xiàn)在可以來創(chuàng)建自定義的下劃線了，這里，我們用準(zhǔn)備的圖片設(shè)定為超鏈接元素的背景圖片，如下：

a { background-image: url(underline.gif); }

當(dāng)然，文字的長度未必和原圖的長度相等，這就需要考慮圖片重復(fù)的問題，也就是說，應(yīng)當(dāng)把重復(fù)限定在水平方向的X軸上，可以如下設(shè)定：

a { background-repeat: repeat-x; }

還有個必須考慮的問題，就是字的大小改變怎么辦？要讓下劃線的圖片始終顯示在超鏈接文字的下方，而不必理會文字大小的話，我們應(yīng)當(dāng)使用CSS中的背景位置（background-position）屬性來定位圖片位于超鏈接元素色底部。而對于如箭頭這樣的下劃線圖片，還得考慮超鏈接的文本邊緣和圖片邊對齊。 下面的這個例子將下劃線背景圖片的位置限定在右下角：

a { background-position: 100% 100%; }

如何控制自定義的下劃線圖片和文字之間的空白呢？這個可以通過增加填充（padding）來做到。下劃線圖片相對于超鏈接文本基線（baseline）的確切位置以來與所用的字的大小。建議你一開始將底部填充（bottom-padding）的大小設(shè)定同下劃線圖片的高度相等，然后再慢慢調(diào)整到合適位置（下面這個CSS設(shè)定超鏈接的底部填充為4像素）：

a { padding-bottom: 4px; }

因為下劃線的圖片被定位在超鏈接元素的底部，所以需要確保所用的超鏈接文本沒有跨行，否則，只有處在最下面的超鏈接文本會出現(xiàn)自定義的下劃線了。怎么解決呢，那就是阻止超鏈接文本跨行產(chǎn)生，可以通過CSS的white-space屬性來完成：

a { white-space: nowrap; }

好了，把上面提到的這些超鏈接標(biāo)記的CSS設(shè)定合并起來，結(jié)果如下：

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

還記得有些超鏈接文本沒有下劃線，但是當(dāng)鼠標(biāo)移到它的上面的時候，下劃線就浮現(xiàn)出來的情況么？自定義的下劃線也可以做到這個效果，那就在:hover上設(shè)定超鏈接背景，而不是在超鏈接標(biāo)記a上設(shè)定，如下：

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

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

怎么樣，是不是很簡單呢？在來看看一些例子和它們對應(yīng)的CSS設(shè)定：

靜態(tài)下劃線

a#example3a { text-decoration: none; background: url('http://tech.tom.com/images/computer/2004/02/04/diagonal.gif') repeat-x 100% 100%; white-space: nowrap; padding-bottom: 2px }

浮動效果下劃線

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

a#example3b:hover { background: url('http://tech.tom.com/images/computer/2004/02/04/diagonal.gif') repeat-x 100% 100%; }

靜態(tài)下劃線

a#example4a { text-decoration: none; background: url('http://tech.tom.com/images/computer/2004/02/04/flower.gif') repeat-x 100% 100%; white-space: nowrap; padding-bottom: 10px }

浮動花朵效果下劃線

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

a#example4b:hover { background: url('http://tech.tom.com/images/computer/2004/02/04/flower.gif') repeat-x 100% 100%; }

靜態(tài)箭頭下劃線

a#example1a { text-decoration: none; background: url('http://tech.tom.com/images/computer/2004/02/04/arrow.gif') repeat-x 100% 100%; white-space: nowrap; padding-bottom: 5px }

浮動動畫箭頭下劃線 （這里箭頭會出現(xiàn)滾動，不過這一滾動圖片的效果只在部分瀏覽器中看得到）

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

a#example2b:hover { background: url('http://tech.tom.com/images/computer/2004/02/04/animarrow.gif') repeat-x 100% 100%; }

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章題目：巧妙利用CSS自定義網(wǎng)頁下劃線樣式
標(biāo)題來源：http://www.muchs.cn/news45/325895.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、用戶體驗、網(wǎng)站改版、電子商務(wù)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)