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

前端 思享 549浏览 1评论

许多知名网站都在文字链的右边加一个箭头图标,例如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博客编辑转载,仅用于参考学习,如有侵权请联系本站修改删除!

扩展阅读

li定义的class不起作用是怎么回事

给列表元素(如 ul li、ol li)定义 CSS 样式,通常的做法是给父元素(如 ul)定义一个 CSS 样式,再用这个样式来定义子元素(如 li)的样式,因为子元素通常比较多,样式又大多相同,一个个定义比较麻烦。这样定义有时会出现一个问题:就拿......

textarea多文本输入框标签自带空格是怎么回事

textarea标签是用来定义一个多行的文本输入控件,在文本输入域中可以输入任意长度的文本。但是今天我在使用的时候,发现输入框默认就带了好几个空格,虽然可以删除,但一刷新页面就是带有空格。 这到底是怎么回事呢?,于是在网上了解了一下。原来是texta......

javascript实现部分内容的展开/收起

我们经常可以看到有的网站的文章有个导读,摘要板块,但其内容确是和正文重复的,如果出于SEO的考虑需要保留这个部分,我们可以收起/展开一部分内容,来提升用户体验 HTML代码示例 默认收起 <!DOCTYPE html> <html ......

与本文相关的文章

avatar
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. avatar
    非常有用的文章 学习了
    神秘人8个月前 (12-22)回复