先说学习：
1.看，看看用这项技术的网站的样式表是怎么写的，把图片存下来，看看都有什么图片放在了一起
2.做，看了之后就要尝试自己做，眼过千遍，不如手过一遍，可以自己试着做一下自己的网站，可以把你看的网站的效果做出来。
说下经验：
1.什么图片整合在一起。
（1）一般情况下，背景repeat-x的放在一起，块背景（不会重复的背景）放在一起，这些是和实现效果挂钩的，背景x轴重复的放在一起，是因为会重复显示，如果和其他图片放在一起，那么重复时就会把它右侧的所有内容都重复显示，所以x轴或者有需要的话y轴重复的背景需要单独放在一起；块背景即为不重复的背景，这类图片因为不重复，所以把这些图片放在一起，不用担心上下左右的地方会显示出来。其实一句话，重复的背景放在一起，不重复的背景放在一起，就这么简单。
（2）坐标定位，其实除了麻烦之外没啥特别难的，我用的方法不知道是不是最好的，但是我觉得挺好用的，把所有图片用photoshop整合到一张图片里面后，先确定你要用的那个图片背景，然后用方形选区工具沿着此图片的上边一直拖到整张图片上边形成一个选区，选择背景图层并ctrl+c复制，然后点新建，会有一个高度，这个高度就是图片y的坐标；同理，沿着此图片的左边到整个图片的左边画一个选区再复制，然后新建，宽度就是x的坐标，这样得出的坐标是绝对准确的，如果你的整合图片做的好，确定坐标很容易。
任何人都有自己的习惯，自己的习惯都是从实践中摸索出来的，我的方法未必是最好的，是最适合你的，只是一块砖，能不能引出你的玉，就需要你不断的自己实践并积累经验，最后找到最适合自己的方法。
图片用的是这张：保存后改名为：tab.jpg" target="_blank" >下面的是简单代码，自己复制保存为HTML文件打开就看到效果。*{margin:0padding:0list-style:none}#tab,li a.on,li a:hover{background:url(tab.jpg) no-repeat}#tab{width:738pxheight:52px}#tab li{width:123pxheight:52pxfloat:left}#tab li a{display:blockwidth:123pxheight:52px}#tab .l1 a:hover{background-position:left -52px}#tab .l2 a:hover{background-position:-124px -52px}#tab .l3 a:hover{background-position:-247px -52px}#tab .l4 a:hover{background-position:-370px -52px}#tab .l5 a:hover{background-position:-493px -52px}#tab .l6 a:hover{background-position:-616px -52px}#tab .l1 a.on{background-position:left bottom}
