Share excellent template plug-in resources
Current position: home page > Website Design >Several practical icon codes made by CSS Sprites

Several practical icon codes made by CSS Sprites

Author: blueleaf Classification: Website Design Time: July 3, 2013 Browse: 8384 Comments: 5

Share a bunch Several practical icon codes made by CSS Sprites include QQ, Tencent Weibo, Sina Weibo, RSS feed, email subscription, QQ space Baidu Icon, copy CSS style to your site if you like Template In CSS, the DIV code is copied to the place you need, and the link address of Weibo QQ, etc. is changed. Note that the path of the picture background should be set correctly. The code is as follows, please see the instructions for use. This is Novice Tutorial


CSS style section:
 #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 code part:
 <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 contact</a></li> <li><a id="qqweibo" href="#" title="" target="_blank" rel="nofollow">Tencent Weibo</a></li> <li><a id="xinlangweibo" href="#" title="" target="_blank" rel="nofollow">Sina Weibo</a></li> <li><a id="qzone" href="#" title="" target="_blank" rel="nofollow">QQ Space</a></li> <li><a id="mailico" href="#" title="" target="_blank" rel="nofollow">Email subscription</a></li> <li><a id="rssico" href="#" title="" target="_blank" rel="nofollow">RSS feed address</a></li> </ul></div>
Note that the above code href="" fills in the URL, title="" fills in the prompt text, and the picture material should be saved as a file.


Disclaimer:

Website: Click Copy to share with friends!

All content resources shared by this website, if not noted, are original by Blueleaf. If you need to reprint, please indicate the source; Please contact us in case of infringement Contact handling Please understand!

Comment List
 blink the eyes kiss Growl happy think poor It's embarrassing Grievance ha-ha hush Right hum Zuo Hum Hum doubt A bad laugh Make money Sadness Be cool Seduce fierce handshake yeah Hee hee Shyness applause greedy Madness Embrace gather and watch Mighty awesome
Submit comments

Clear information
Close Comment
 All right
All right tourist
#4
Blue leaf, this picture of yours is missing.
2016-06-25 13:14 reply
 blueleaf
blueleaf tourist
@An Hao: It's several years ago, and I can't find it.
2016-06-25 18:36 reply
 evil spirits
evil spirits tourist
#3
Css is good
2013-08-08 14:46 reply
 Li Ming
Li Ming tourist
#2
I also thank the Blue Leaf blogger for sharing!
2013-07-09 08:17 reply
 Blue
Blue tourist
#1
Thank you for sharing!
2013-07-04 10:49 reply
music appreciation