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

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

作者:蓝叶 分类:网站设计 时间:2013-07-03 浏览:8426 评论: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=""填写提示文字,图片素材请另存为保存。


免责声明:

本页网址:点击复制分享给朋友吧!

本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!

评论列表
挤眼亲亲咆哮开心想想可怜糗大了委屈哈哈小声点右哼哼左哼哼疑问坏笑赚钱啦悲伤耍酷勾引厉害握手耶嘻嘻害羞鼓掌馋嘴抓狂抱抱围观威武给力
提交评论

清空信息
关闭评论
安好
安好游客
#4
蓝叶,你的这个图片掉了。
2016-06-25 13:14回复
蓝叶
蓝叶游客
@安好:几年前的了,我也找不到了。
2016-06-25 18:36回复
魑魅魍魉
魑魅魍魉游客
#3
css还是不错的
2013-08-08 14:46回复
李明
李明游客
#2
我也感谢蓝叶博主的分享!
2013-07-09 08:17回复
蓝色悠悠
蓝色悠悠游客
#1
感谢蓝叶博主的分享!
2013-07-04 10:49回复
音乐欣赏