在前台页面设计中，为了实现更好的页面效果，我们可以在超链接文字前加上合适的小图标，从而给用户更好的视觉体验。
[html] view plain copy
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
display:inline-block
width: 100px
height:40px
background: gray url(../img/logo.png) no-repeat fixed 10px center
text-indent:35px
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
备注：
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif')也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
这是我第二次碰到如题的问题了--在a标签里嵌套icon的话，这个icon就会变肥。比如这样：<a href="images/huhu.jpg"><i class="icon-lightbulb"></i></a>看似是小问题，但是如果放着不管的话，很影响美观...
解决方法：把div的行距，line-height从50px改为1。
名字后加“icon”是某某偶像的意思。
icon：英[ˈaɪkɒn] 美[ˈaɪkɑːn]
n.：偶像图标圣像图符崇拜对象。
[例句]Only Marilyn has proved as enduring a fashion icon.
只有玛丽莲是常青的时尚偶像。
相关介绍：
Icon，也可以称为Idol，二者的关键区别，在于人们喜爱的方式。例如，不少人对乔布斯的崇拜，就接近idolatry的性质。另外，美国的猫王Elvis Presley，今天被称为流行音乐界的Icon，但在1950年代时确实是不折不扣的Teen idol。
Icon以及相关的各个词语，还经常用于专业学科领域中的术语说法。除了指计算机界面图标的Icon，在美术史研究中，有系统的符号象征也称为Iconography，前些年流行的Dan Brown小说中，就包含有大量关于达芬奇画作中Iconography的猜想。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）