CSS Sprites做的几个实用性图标代码

现在位置：首页 > 网站设计 > CSS Sprites做的几个实用性图标代码

CSS Sprites做的几个实用性图标代码

蓝叶网站设计 2013-07-03 8084 5评论

分享一串CSS Sprites做的几个实用性图标代码，图标有QQ、腾讯微博、新浪微博、RSS源、邮件订阅、QQ空间、百度图标，如果你喜欢就把CSS样式复制到你站模板CSS里面，DIV代码复制到你需要的地方，更改里面微博QQ等的链接地址，注意图片背景的路径要设置正确，代码如下请看说明使用，此为新手教程：

CSS样式部分：

#qqhao,#qqweibo,#xinlangweibo,#mailico,#qzone,#rssico,#baiduico{background:url(icobg.png) no-repeat;}
#qqhao{display:block;width:32px;height:32px; background-position:0 -100px;font-size:0px}
#qqweibo{display:block;width:32px;height:32px; background-position:0 -66px;font-size:0px}
#xinlangweibo{display:block;width:32px;height:32px; background-position:0 0;font-size:0px}
#mailico{display:block;width:32px;height:32px; background-position:0 -33px;font-size:0px}
#qzone{display:block;width:32px;height:32px; background-position:0 -168px;font-size:0px}
#rssico{display:block;width:32px;height:32px; background-position:0 -134px;font-size:0px}
#baiduico{display:block;width:32px;height:32px; background-position:0 -202px;font-size:0px}
#qqhao:hover,#qqweibo:hover,#xinlangweibo:hover,#mailico:hover,#qzone:hover,#rssico:hover,#baiduico:hover{filter:alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;}
.tubiao{width:300px;height:40px;float:right}
.tubiao ul li{list-style-image: none;list-style-type: none;float:left;padding-right:5px}

DIV代码部分：

<div class="tubiao">
<ul>
<li><a id="qqhao" href="http://wpa.qq.com/msgrd?V=1&Menu=yes&Uin=84953409" target="_blank" rel="nofollow">QQ联系</a></li> 
<li><a id="qqweibo" href="#" title="" target="_blank" rel="nofollow">腾讯微博</a></li> 
<li><a id="xinlangweibo" href="#" title="" target="_blank" rel="nofollow">新浪微博</a></li> 
<li><a id="qzone" href="#" title="" target="_blank" rel="nofollow">QQ空间</a></li> 
<li><a id="mailico" href="#" title="" target="_blank" rel="nofollow">邮件订阅</a></li> 
<li><a id="rssico" href="#" title="" target="_blank" rel="nofollow">RSS源地址</a></li> 
</ul></div>

注意以上代码href=""里面填写网址，title=""填写提示文字，图片素材请另存为保存。