实战CSS Sprites超详细视频教程

CSS Sprites是网页设计的一个重要技巧,它把网页中一些常用的背景图片整合到一张图片文件中,再利用CSS的“background-position”进行背景定位。利用CSS Sprites的设计网页能很好地减少了网页的https请求,我在WordPress中YSlow测试的A级攻略这篇文章中曾经提过。

可是自己一直没时间写一个简单的教程说说CSS Sprites的实现。最近却发现Exactly How to Use CSS Sprites这篇文章,它说的正是利用CSS Sprites方法进行导航栏的设计,而且说得非常的详细!文章以苹果网站的导航栏为实例,一步一步在视频中解释具体的设计过程。而视频时间长达30分钟!

globalnavbg 1 实战CSS Sprites超详细视频教程

教程中的实例与上面的苹果原生导航栏样式稍稍不同,具体可以点下面链接查看Demo:

{ CSS Sprites Demo }

教程中所有文件的下载请点下面链接:

{ Download CSS Sprites Files }

查看视频教程如下(英文解说,作者非常耐性,30分钟啊!)

分类:theme skill, WordPress;标签:, , , ;收藏本文的永久链接

14 Responses to “实战CSS Sprites超详细视频教程”

  1. 金融危机 回复此留言 2009/02/19 05:08 #comment-4494

    看不到视频的呀。 你这个主题相当的霸道了.

  2. welee 回复此留言 2009/02/19 08:22 #comment-4498

    我一直都想用这方法,只是不知怎么做,不过这视频教程会不会太长了些啊~哈哈!

    • Jinwen 回复此留言 2009/02/19 08:27 #comment-4499

      其实不难,你把demo的文件下载下来对照一下就行了;如果有问题的话可以问下我,或者我能解释一下的。

  3. Leeiio 回复此留言 2009/02/19 01:48 #comment-4492

    我也很有耐心的看了,之前嫌自個拼圖比較麻煩,一般都用提供CSS Sprites功能的網站自動拼合的哈~

  4. Leeiio 回复此留言 2009/02/19 01:56 #comment-4493

    不過這個視頻地址在大陸似乎無法正常訪問,至少我這裡是用VPN才能看到的...

  5. cosbeta 回复此留言 2009/02/19 10:02 #comment-4500

    落伍了,落伍了,我用了几年了,哈哈哈。开玩笑的。分享精神值得敬佩,我现在好懒了,都不怎么更新blog了

    • Jinwen 回复此留言 2009/02/19 17:00 #comment-4509

      就是你早点分享,我们就早点扫盲啦~

  6. 爱月 回复此留言 2009/02/19 11:19 #comment-4502

    不知道为啥,国内的网速缓冲一张特别大的图片还是有困难的吧?我的意思是开着迅雷。。。呃。。。?

    • Jinwen 回复此留言 2009/02/19 17:39 #comment-4511

      你说的是我的404页面还没弄好吧,呵呵。谢谢你了,你不提的话我就真的不弄它了,每做一次新主题,一大堆事情要弄,唉。

    • cosbeta 回复此留言 2009/02/20 01:31 #comment-4515

      修改自己的主题很容易,发布出来就一大堆要注意的东西,不容易啊

  7. netputer 回复此留言 2009/02/22 05:30 #comment-4535

    看不到视频的说,强烈要求贴到 YouTube 或者,Jinwen 也来本地下载吧~

  8. Insion 回复此留言 2010/07/24 10:39 #comment-15166

    这个视频能不能转帖到国内的视频网站?譬如youku、tudou之类的?