CSS Sprites是网页设计的一个重要技巧,它把网页中一些常用的背景图片整合到一张图片文件中,再利用CSS的“background-position”进行背景定位。利用CSS Sprites的设计网页能很好地减少了网页的https请求,我在WordPress中YSlow测试的A级攻略这篇文章中曾经提过。
可是自己一直没时间写一个简单的教程说说CSS Sprites的实现。最近却发现Exactly How to Use CSS Sprites这篇文章,它说的正是利用CSS Sprites方法进行导航栏的设计,而且说得非常的详细!文章以苹果网站的导航栏为实例,一步一步在视频中解释具体的设计过程。而视频时间长达30分钟!

教程中的实例与上面的苹果原生导航栏样式稍稍不同,具体可以点下面链接查看Demo:
{ CSS Sprites Demo }
教程中所有文件的下载请点下面链接:
{ Download CSS Sprites Files }
查看视频教程如下(英文解说,作者非常耐性,30分钟啊!)