自动外链工具】 【在线排版工具】 【搜索引擎提交入口】 【百度收录批量查询工具】 【批量打开网址工具】 【投稿本站

文字超链接旁边怎么加上小箭头图标

54

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

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

先来看看效果图。

图片样式

上图显示两个超链接样式,分别是两个不同的箭头图标,其实他们是一个背景图,我们可以通过css实现在文字链右边自动添加这样的一个背景图。

css代码如下:

  1. .content{
  2.     width:600px;
  3.     margin:30px 30px 30px 30px;
  4.     font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif;
  5.     font-size:14px;
  6.     color:#333;
  7.     line-height:185%;
  8. }
  9. .content a {
  10. background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center rightright no-repeat;
  11.     padding-right:13px;
  12.     margin-left:3px;
  13.     margin-right:3px;
  14.     text-decorationunderline;
  15.     color#c30;
  16. }
  17. .content a:hover {
  18.     colorblue;
  19. }

关键代码是 background:url 这里,url是一个图片地址。上述css代码,url使用的是一个箭头图标的base64字符串,(参考:怎么把图片转换成base64字符串),这样的好处是不用再去请求图片,节省时间,提交效率。

下面是html关键代码:

  1. <div class="content">
  2.     <font style="font-size:16px;font-weight:bold">超链接样式一</font><br>
  3.     html里使用<a href="#">select控件</a>,非常容易就能实现下拉菜单的效果。但是由于<a href="#">select控件</a>只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,<a href="#">div+css实现的下拉菜单</a>便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
  4. </div>

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

完整的html代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <meta http-equiv="Content-Language" content="zh-CN" />
  6. <meta http-equiv="Cache-Control" content="no-transform " />
  7. <meta http-equiv="Cache-Control" content="no-siteapp" />
  8. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
  9. <title>css实例_文字超链接右边加一个箭头_卡卡网 webkaka.com</title>
  10. <style type="text/css">
  11. .content{
  12.     width:600px;
  13.     margin:30px 30px 30px 30px;
  14.     font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif;
  15.     font-size:14px;
  16.     color:#333;
  17.     line-height:185%;
  18. }
  19. .content a {
  20. background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center rightright no-repeat;
  21.     padding-right:13px;
  22.     margin-left:3px;
  23.     margin-right:3px;
  24.     text-decorationunderline;
  25.     color#c30;
  26. }
  27. .content a:hover {
  28.     colorblue;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33.      <div class="content">
  34.        <font style="font-size:16px;font-weight:bold">超链接样式一</font><br>
  35.           html里使用<a href="#">select控件</a>,非常容易就能实现下拉菜单的效果。但是由于<a href="#">select控件</a>只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,<a href="#">div+css实现的下拉菜单</a>便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
  36.      </div>
  37. </body>
  38. </html>
本文来源:【css背景图实现文字链右边加一个箭头图标
思享SEO博客编辑转载,仅用于参考学习,如有侵权请联系本站修改删除!
广告位招租评论广告

1条评论

  • avatar
    神秘人  回复

    非常有用的文章 学习了

昵称*

邮箱*

网址