蓝叶博客

青春是一个充满活力的季节,即便是我们失去了天使的翅膀,只要我们还有一颗青春的心,那么我们的生活依然能够如阳光般灿烂!......
现在位置:首页 > 网站设计 > CSS Sprites做的几个实用性图标代码

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

蓝叶    网站设计    2013-07-03    4222    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=""填写提示文字,图片素材请另存为保存。


评论一下 分享本文 赞助蓝叶

赞助蓝叶X

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

清空信息
关闭评论
安好
安好2016-06-25 13:14回复
#4
蓝叶,你的这个图片掉了。
蓝叶
蓝叶2016-06-25 18:36回复
@安好:几年前的了,我也找不到了。
魑魅魍魉
魑魅魍魉2013-08-08 14:46回复
#3
css还是不错的
李明
李明2013-07-09 08:17回复
#2
我也感谢蓝叶博主的分享!
蓝色悠悠
蓝色悠悠2013-07-04 10:49回复
#1
感谢蓝叶博主的分享!
快捷导航返回顶部
你问我答
技术QQ群
音乐QQ群
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部