PSD模板转XHTML/CSS文档教程(2)
http://www.itjxue.com 2015-08-05 22:59 来源:未知 点击次数:
准备导航图片
不管你相不相信，我们只需要一张大图片，呈现正常和激活的状态，然后巧用CSS改变背景图片位置，这种技术称为”样式表贴图定位（CSS Sprites）“。
这么cool的技术的目的就是通过整合图片（只要加载一次图片，在激活状态下运行也是正常的），减少对服务器的请求次数，提高页面加载速度。整个图片大小是80kb。图片如下：
在photoshop中打开PSD文件，选取”矩形选框”工具，选中整个导航。
然后去往菜单”图像>裁剪”，裁剪后，你将注意到画布变短了，所以要增加画布高度，记住当前画布的高度，乘以2，画布高度将是当前画布的一倍。我的179px，增加一倍后是358px，去往菜单”图像>画布大小”。如下图进行设置：
效果如下：
