讓網頁超鏈接擁有多姿多彩的下劃線

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 讓網頁超鏈接擁有多姿多彩的下劃線

讓網頁超鏈接擁有多姿多彩的下劃線

編輯：CSS詳解

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%;
　　}

　　二、實例欣賞

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

自定義鏈接下劃線舉例

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

　　<Html>
　　<head>
　　<title>ex</title>

　　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>實例：</p>
　　<p> <a href="#" id="example1a">波紋線靜態下劃線</a>，
　　<a href="#" id="example1b">鼠標停留時出現的波紋線</a>。</p>
　　<p> <a href="#" id="example2a">花朵靜態下劃線</a>，
　　<a href="#" id="example2b">鼠標停留時出現的花朵下劃線</a>。</p>

　　</body>
　　</Html>

CSS詳解

CSS背景background屬性詳解: 背景 background　　CSS 說明　　background-image:url(圖片的網址
純css繪制蜂巢六邊形效果: 純CSS繪制的六邊形復制代碼代碼如下:<Html><head><ti
各種不同的浏覽器對CSS3和HTML5的支持狀況: 終究CSS3 和 Html5 的組合會成為下一個Web標准，而且越來越多的浏覽器開始支持更多的新屬

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章