|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
css背景圖實現(xiàn)文字鏈右邊加一個箭頭圖標(biāo)
作者:admin 時間:2016-11-25 11:18:3 瀏覽:許多知名網(wǎng)站都在文字鏈的右邊加一個箭頭圖標(biāo)，例如Google站長管理后臺，Alexa官網(wǎng)等，這樣設(shè)計的好處是讓鏈接更醒目，更容易辨認(rèn)。
文字鏈右邊加一個箭頭圖標(biāo)的方法，多數(shù)人是使用css背景圖來實現(xiàn)，包括上面提到的Google站長管理后臺，Alexa官網(wǎng)等。是的，這種方法最容易掌握和應(yīng)用。這正是本文要介紹的實現(xiàn)方法。
先來看看效果圖。
css背景圖實現(xiàn)文字鏈右邊加一個箭頭圖標(biāo)
上圖顯示兩個超鏈接樣式，分別是兩個不同的箭頭圖標(biāo)，其實他們是一個背景圖，我們可以通過css實現(xiàn)在文字鏈右邊自動添加這樣的一個背景圖。
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;
}
關(guān)鍵代碼是 background:url 這里，url是一個圖片地址。上述css代碼，url使用的是一個箭頭圖標(biāo)的base64字符串，（導(dǎo)讀：使用瀏覽器輕松獲得圖片base64字符串），這樣的好處是不用再去請求圖片，節(jié)省時間，提交效率。
下面是html關(guān)鍵代碼：
<div class="content">
<font style="font-size:16px;font-weight:bold">超鏈接樣式一</font><br>
html里使用<a href="#">select控件</a>，非常容易就能實現(xiàn)下拉菜單的效果。但是由于<a href="#">select控件</a>只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設(shè)計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，<a href="#">div+css實現(xiàn)的下拉菜單</a>便大量被網(wǎng)頁設(shè)計師使用。通過div+css，可以隨心所欲的實現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁整體布局搭配的更美觀和諧。
</div>
上述html代碼看到，其實我們無需寫任何額外代碼，正常超鏈即可。這樣的好處更在于，我們可以任何時候修改css代碼，來設(shè)置超鏈的不同的樣式，需不需要右邊箭頭圖標(biāo)，也可以在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" 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實例_文字超鏈接右邊加一個箭頭_卡卡網(wǎng) 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>
<div class="content">
<font style="font-size:16px;font-weight:bold">超鏈接樣式一</font><br>
html里使用<a href="#">select控件</a>，非常容易就能實現(xiàn)下拉菜單的效果。但是由于<a href="#">select控件</a>只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設(shè)計中有時候顯得與整體布局搭配不太美觀。正因為這個原因，<a href="#">div+css實現(xiàn)的下拉菜單</a>便大量被網(wǎng)頁設(shè)計師使用。通過div+css，可以隨心所欲的實現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁整體布局搭配的更美觀和諧。
</div>
</body>
</html>
標(biāo)簽: css
- 站長推薦
