首頁(yè) > 開(kāi)發(fā) > HTML > 正文

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

2018-10-16 21:10:31
字體:
來(lái)源:轉載
供稿:網(wǎng)友
CSS本身沒(méi)有直接提供變換HTML鏈接下劃線(xiàn)的功能,但只要運用一些技巧,我們還是可以讓單調的網(wǎng)頁(yè)鏈接下劃線(xiàn)變得豐富多彩。

  一、基本原理

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

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

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


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

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

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

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

  第七,為了在鏈接文本的下方給自定義圖形留出空間,必須加入適當的空白。下劃線(xiàn)圖形相對于鏈接文字的具體位置與文字的大小有關(guān),但一般而言,可以先讓底部空白等于下劃線(xiàn)圖形的高度,必要時(shí)再作調整。例如: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)只在鼠標停留時(shí)出現,只要把原來(lái)直接設置在鏈接元素上的CSS background屬性改到:hover ,例如:

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

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


  二、實(shí)例欣賞

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

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

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

  <html>
  <head>
  <title>ex</title>

  <style type="text/css">

  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">鼠標停留時(shí)出現的波紋線(xiàn)</a>。</p>
  <p> <a href="#" id="example2a">花朵靜態(tài)下劃線(xiàn)</a>,
  <a href="#" id="example2b">鼠標停留時(shí)出現的花朵下劃線(xiàn)</a>。</p>

  </body>
  </html>

發(fā)表評論 共有條評論
用戶(hù)名: 密碼:
驗證碼: 匿名發(fā)表