首页 > web前端 > css教程 > 正文

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

巴扎黑
发布: 2017-05-22 11:37:12
原创
2975 人浏览过

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

文字链右边加一个箭头图标的方法,多数人是使用css背景图来实现,包括上面提到的Google站长管理后台,Alexa官网等。是的,这种方法最容易掌握和应用。这正是本文要介绍的实现方法。

先来看看效果图。

201611251142115687.gif

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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!