用Css Sprites制作的Feed订阅集

编程开发 / / at

Css Sprites是目前非常流行的技术,Google和Facebook等都在首页用到这个,中文对Css Sprites称为Css里的滑动门技术,我们今天用Css Sprites(滑动门技术)对Feed订阅图标集进行设计,达到速度体验和加载美观的效果。

网络上很多Feed订阅的网站,通常我们把它用一个个的小图标分别指向这些网站链接,但在访客浏览网站的时候,这些图标常常一个个的加载,很影响美观,同时速度也很慢,这里就用Css Sprites来做,同时解决了加载时的美观和速度问题。

1:搜集你所需要制作的图标,一起上传到网站www.csssprites.com上,此Css Sprites网站会自动生成一个图标集合图片,就是把你刚才所用到的所有图标都放在一个图片上。此Css Sprites网站还会告诉你每个图标在Css里调用时的具体位置参数。
2:把刚才的图片(分别有gif和png格式),我们取png格式,上传到网站目录里,在Css里进行调用
3:我要此Feed图标订阅集放在侧边栏,所以整体样式要协调,所以实际代码中要加侧边区块的class类,即function,Xhtml代码如下

<div id="Misc">
<h3>图标汇集</h3>
<ul>
<li><a id="f-a" target="_blank" href="http://www.bloglines.com/sub/http://blog.fend.cn/feed"><span>Bloglines</span></a></li>
<li><a id="f-b" target="_blank" href="http://9.douban.com/reader/subscribe?url=http://blog.fend.cn/feed"><span>Douban</span></a></li>
<li><a id="f-c" target="_blank" href="http://fusion.google.com/add?feedurl=http://blog.fend.cn/feed"><span>Google</span></a></li>
<li><a id="f-d" target="_blank" href="http://inezha.com/add?url=http://blog.fend.cn/feed"><span>Inezha</span></a></li>
<li><a id="f-e" target="_blank" href="http://www.netvibes.com/subscribe.php?url=http://blog.fend.cn/feed"><span>Netvibes</span></a></li>
<li><a id="f-f" target="_blank" href="http://www.newsgator.com/ngs/subscriber/subfext.aspx?url=http://blog.fend.cn/feed"><span>Newsgator</span></a></li>
<li><a id="f-g" target="_blank" href="http://www.pageflakes.com/subscribe.aspx?url=http://blog.fend.cn/feed"><span>Pageflakes</span></a></li>
<li><a id="f-h" target="_blank" href="http://mail.qq.com/cgi-bin/feed?u=http://blog.fend.cn/feed"><span>QQ</span></a></li>
<li><a id="f-i" target="_blank" href="http://www.rojo.com/add-subscription?resource=http://blog.fend.cn/feed"><span>Rojo</span></a></li>
<li><a id="f-j" target="_blank" href="http://www.xianguo.com/subscribe.php?url=http://blog.fend.cn/feed"><span>Xianguo</span></a></li>
<li><a id="f-k" target="_blank" href="http://add.my.yahoo.com/rss?url=http://blog.fend.cn/feed"><span>Yahoo</span></a></li>
<li><a id="f-l" target="_blank" href="http://reader.youdao.com/b.do?keyfrom=feedsky&url=http://blog.fend.cn/feed"><span>Youdao</span></a></li>
<li><a id="f-m" target="_blank" href="http://www.zhuaxia.com/add_channel.php?url=http://blog.fend.cn/feed"><span>ZhuaXia</span></a></li>
</ul>
</div>

4:Css代码如下:

/* 基本定义 */
#Misc ul{
 padding:10px 0 5px;
 list-style-type: none;
}
#Misc li{
 background: none;
 margin:0 0 0 0;
 padding:0 0 0 8px;
 height: 19px;
}
/* 定义Feed图标集链接a的样式 */
#Misc li a {
 text-decoration: none;
 background-image: url('images/feed.gif');
 background-repeat: no-repeat;
 width: 103px;
 height: 16px;
 display: block;
}
/* 隐藏链接文字 */
#Misc li a span{
 display: none;
}
/* 通过调整背景大图的位置定义每个图标链接a的样式 */
#f-a {background-position: -8px -8px;}
#f-b {background-position: -8px -40px;}
#f-c {background-position: -8px -72px;}
#f-d {background-position: -8px -104px;}
#f-e {background-position: -8px -136px;}
#f-f {background-position: -8px -168px;}
#f-g {background-position: -8px -200px;}
#f-h {background-position: -8px -232px;}
#f-i {background-position: -8px -264px;}
#f-j {background-position: -8px -296px;}
#f-k {background-position: -8px -328px;}
#f-l{background-position: -8px -360px;}
#f-m {background-position: -8px -392px;}

5:这样整个效果就实现了,Css Sprites的Feed订阅集,对Css Sprites(滑动门)技术进行总结:
定义:把多个图标聚合到一张图上,并通过Css里的位置参数设置,进行调用此图片的不同部分。
优点:
a:加载时避免图标一个个的蹦出来,并且很多图标只用这一个图,达到加快速度以及增强体验的效果。
b:可以利用链接的link,hover,active,visited等调用一个图中的不同部分,达到动态导航的效果。
c:就一张图片,容易维护,节省流量。
缺点:
a:如果这张图片过大而加载失败,则所有的图片效果都没了
b:位置调整时比较麻烦,要记住每个图标的具体位置

2条回应:“用Css Sprites制作的Feed订阅集”

  1. […] 这里用到了css sprites,优点在于在切换展开和隐藏列表时,避免图标按钮的加载延时;并且减少服务器的http请求,从而实现了图片的web加速。 […]

  2. e憨豆儿说道:

    学习了!留下美好的祝愿!

发表评论

电子邮件地址不会被公开。 必填项已用*标注