文字鏈右邊加一個箭頭表徵圖的方法，多數人是使用css背景圖來實現，包括上面提到的Google站長管理後台，Alexa官網等。是的，這種方法最容易掌握和應用。這正是本文要介紹的實現方法。
先來看看。
css背景圖實現文字鏈右邊加一個箭頭表徵圖
顯示兩個超連結樣式，分別是兩個不同的箭頭表徵圖，其實他們是一個背景圖，我們可以通過css實現在文字鏈右邊自動添加這樣的一個背景圖。
css代碼如下：
.content{ width:600px; margin:30px 30px 30px 30px; font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif; font-size:14px; color:#333; line-height:185%;}.content a {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat; padding-right:13px; margin-left:3px; margin-right:3px; text-decoration: underline; color: #c30;}.content a:hover { color: blue;}
關鍵代碼是 background:url 這裡，url是一個圖片地址。上述css代碼，url使用的是一個箭頭表徵圖的base64字串，（導讀：使用瀏覽器輕鬆獲得圖片base64字串），這樣的好處是不用再去請求圖片，節省時間，提交效率。
下面是html關鍵代碼：
<p> <font style="font-size:16px;font-weight:bold">超連結樣式一</font><br>
html裡使用<a href="#">select控制項</a>，非常容易就能實現下拉式功能表的效果。但是由於<a href="#">select控制項</a>只能更改長度，不能更改高度和顏色等樣式，因此在網頁設計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，<a href="#">p+css實現的下拉式功能表</a>便大量被網頁設計師使用。通過p+css，可以隨心所欲的實現自己想要的樣式效果，使得下拉式功能表與網頁整體布局搭配的更美觀和諧。
</p>
上述html代碼看到，其實我們無需寫任何額外代碼，正常超鏈即可。這樣的好處更在於，我們可以任何時候修改css代碼，來設定超鏈的不同的樣式，需不需要右邊箭頭表徵圖，也可以在css裡輕鬆搞定。
完整的html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta http-equiv="Content-Language" content="zh-CN" /><meta http-equiv="Cache-Control" content="no-transform " /> <meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" /><title>css執行個體_文字超連結右邊加一個箭頭_卡卡網 webkaka.com</title><style type="text/css">.content{ width:600px; margin:30px 30px 30px 30px; font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif; font-size:14px; color:#333; line-height:185%;}.content a {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat; padding-right:13px; margin-left:3px; margin-right:3px; text-decoration: underline; color: #c30;}.content a:hover { color: blue;}</style></head><body> <p> <font style="font-size:16px;font-weight:bold">超連結樣式一</font><br> html裡使用<a href="#">select控制項</a>，非常容易就能實現下拉式功能表的效果。但是由於<a href="#">select控制項</a>只能更改長度，不能更改高度和顏色等樣式，因此在網頁設計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，<a href="#">p+css實現的下拉式功能表</a>便大量被網頁設計師使用。通過p+css，可以隨心所欲的實現自己想要的樣式效果，使得下拉式功能表與網頁整體布局搭配的更美觀和諧。 </p></body></html>
【相關推薦】
1. CSS3免費視頻教程
2. 關於H5和CSS3表單驗證的使用教程
3. CSS3完成一個方框圓角效果的代碼教程
4. 教你用CSS繪製標準的圓形圖案
5. 教你怎麼去規範的書寫CSS樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
