用css实现文本超链文字右边加一个箭头图标-tutorial css-php.cn

用css实现文本超链文字右边加一个箭头图标

巴扎黑

Lepaskan： 2017-05-22 11:37:12

asal

2974 orang telah melayarinya

许多知名网站都在文字链的右边加一个箭头图标，例如Google站长管理后台，Alexa官网等，这样设计的好处是让链接更醒目，更容易辨认。

文字链右边加一个箭头图标的方法，多数人是使用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;
}

Salin selepas log masuk

关键代码是 background:url 这里，url是一个图片地址。上述css代码，url使用的是一个箭头图标的base64字符串，（导读：使用浏览器轻松获得图片base64字符串），这样的好处是不用再去请求图片，节省时间，提交效率。

下面是html关键代码：

<p>
    <font style="font-size:16px;font-weight:bold">超链接样式一</font><br>

Salin selepas log masuk

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

上述html代码看到，其实我们无需写任何额外代码，正常超链即可。这样的好处更在于，我们可以任何时候修改css代码，来设置超链的不同的样式，需不需要右边箭头图标，也可以在css里轻松搞定。

完整的html代码如下：

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

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

Salin selepas log masuk

【相关推荐】

1. CSS3免费视频教程

2. 关于H5和CSS3表单验证的使用教程

3. CSS3完成一个方框圆角效果的代码教程

4. 教你用CSS绘制标准的圆形图案

5. 教你怎么去规范的书写CSS样式

Atas ialah kandungan terperinci 用css实现文本超链文字右边加一个箭头图标. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!