<p id="l55vn"></p>
<nobr id="l55vn"></nobr>
<menuitem id="l55vn"><delect id="l55vn"><i id="l55vn"></i></delect></menuitem>

<p id="l55vn"></p>
      <nobr id="l55vn"><thead id="l55vn"><i id="l55vn"></i></thead></nobr>
      <b id="l55vn"></b>

            <menuitem id="l55vn"></menuitem>
              <nobr id="l55vn"><ruby id="l55vn"><i id="l55vn"></i></ruby></nobr>

              首頁 > 開發 > HTML > 正文

              CSS:自定多姿多彩的網頁鏈接下劃線

              2018-10-16 21:10:31
              字體:
              來源:轉載
              供稿:網友
              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>

              發表評論 共有條評論
              用戶名: 密碼:
              驗證碼: 匿名發表
              a级情欲片在线观看免费
              <p id="l55vn"></p>
              <nobr id="l55vn"></nobr>
              <menuitem id="l55vn"><delect id="l55vn"><i id="l55vn"></i></delect></menuitem>

              <p id="l55vn"></p>
                  <nobr id="l55vn"><thead id="l55vn"><i id="l55vn"></i></thead></nobr>
                  <b id="l55vn"></b>

                        <menuitem id="l55vn"></menuitem>
                          <nobr id="l55vn"><ruby id="l55vn"><i id="l55vn"></i></ruby></nobr>