讓網頁超連結擁有多姿多彩的底線

來源:互聯網
上載者:User
連結|網頁   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>

  <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>執行個體:</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>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。