首頁 > web前端 > css教學 > 主體

用css實作文字超鏈文字右邊加一個箭頭圖標

巴扎黑
發布: 2017-05-22 11:37:12
原創
3006 人瀏覽過

許多知名網站都在文字鏈的右邊加一個箭頭圖標,例如Google站長管理後台,Alexa官網等,這樣設計的好處是讓連結更醒目,更容易辨認。

文字鏈右邊加一個箭頭圖示的方法,多數人是使用css背景圖來實現,包括上面提到的Google站長管理後台,Alexa官網等。是的,這種方法最容易掌握和應用。這正是本文要介紹的實作方法。

先來看看效果圖。

用css實作文字超鏈文字右邊加一個箭頭圖標

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裡面使用select控制項,非常容易就能實現下拉式選單的效果。但是由於select控制只能更改長度,不能更改高度和顏色等樣式,因此在網頁設計中有時候顯得與整體佈局搭配不太美觀。正因為這個原因,p+css實現的下拉選單便大量被網頁設計師使用。透過p+css,可以隨心所欲的實現自己想要的樣式效果,使得下拉選單與網頁整體佈局搭配的更美觀和諧。

上述html程式碼看到,其實我們不需要寫任何額外程式碼,正常超鏈即可。這樣的好處更在於,我們可以任何時候修改css程式碼,來設定超鏈的不同的樣式,需不需要右邊箭頭圖標,也可以在css裡輕鬆搞定。

完整的html程式碼如下:






 


css实例_文字超链接右边加一个箭头_卡卡网 webkaka.com



     

超链接样式一
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,p+css实现的下拉菜单便大量被网页设计师使用。通过p+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。

登入後複製

【相關推薦】

#1. CSS3免費影片教學

##2. 

關於H5和CSS3表單驗證的使用教學

3. 

CSS3完成一個方框圓角效果的程式碼教學

4. 

教你用CSS畫出標準的圓形圖案

5.

 教你怎麼去規範的書寫CSS樣式

以上是用css實作文字超鏈文字右邊加一個箭頭圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板