图标在一张图内做法
参考QQ微博的做法:icon:两张图标上下结构在一张图内,需要分别显示在两个地方。
icon:
需做成的样子:
.header .qqwb ul li{ display: inline-block;/* 使QQ登录和微博登录显示在同一行,且可以改变框的大小.*/}.header .qqwb ul li a{border: 1px solid #000;color: white;text-decoration: none;/*列表前面的小黑点去掉*/background-image: url(../img/login-icon.gif); /*插入QQ微博背景图片,为一张,因为两个a,所以分别插入一张,共两张*/background-repeat: no-repeat; /*不平铺,此时两个QQ图片,即只显示了上半部分.*//*width: 100px;*/ display: inline-block;/* a是内联标签,需转成内联块,使框能改变高度,变大,使图标显示完全.*/padding-left: 28px; /* 使文字在框内右移出一个图标的宽度*/height: 28px; /*框的高度为28,图片高度的一半*/line-height: 28px; /* 使文字在框中垂直居中显示*/}.header .wb{background-position-y: -28px; /*给微博单设一个class,使图片上移一半,则显示微博图标.*/}<div class="header"><div class="qqwb"><ul><li><a href="">QQ登录</a></li><li><a href="" class="wb">微博登录</a></li></ul></div></div>
所以,总结出多图标都在一个图内利用背景图片的特性可以这样操作:
a=标签;
需要图标超链接可以加上a标签,否则不用加,a代表的是图标所在标签。
1.首先把a标签变成内联块,可以控制背景图片的宽高。
2.a的宽高要和每一个图标宽高相同,这样做出一个图标后,其他可以通过控制背景图片位置获得。
3.背景图片注意要不平铺
4.或者,文字和这个icon分开写,避免文字padding问题和背景图片过宽。
<div class="allicons"><ul><li><a href="">图标1</a></li><li><a href="" class="icon2">图标2</a></li><li><a href="" class="icon3">图标3</a></li></ul></div>.allicons ul li{ display: inline-block;/* 变成内联块,并且一行.*/}.allicons ul li a{display: inline-block; /* a是内联标签,需转成内联块,使框能改变高度,变大,使图标显示完全.*/background-image: url(../img/xxx); /*插入全icons背景图片*/background-repeat: no-repeat;/*不平铺,要显示出一个icon即可*/width: 100px; /*icon+文字的宽,没有文字就是icon的宽*/ height: 28px; /*每个icon的高*/padding-left: 28px;/* 图标是背景,这个时候文字和图标是重合的,需使文字在框内右移出一个图标的宽度*/line-height: 28px; /* 文字行高设置和icon一样高,使文字在框中垂直居中显示*/color: white; /* 文字颜色*/text-decoration: none; /*列表前面的小黑点去掉*/border: 1px solid #000; /*能看清楚点儿*//* background-position-x: -xxxpx;*/ /*图标左上需要调节一下,图标不是和图片左上重合的*//*background-position-y: 1px;*/}.allicons .icon2{background-position-y: -xxxpx; /*给其他单设class,调整他们位置.*/background-position-x: xxxpx;}.allicons .icon3{background-position-y: -xxxpx; background-position-x: xxxpx;}
目前这个做法不完善,会接着补充…