web菜鸟，总结一下

一.  CSSSPRITE(CSS精灵）

​    需求：其实就想定位背景图片。定位背景图片中的一部分，减少了打开网页时请求图片的次数。主要有两种方式，

一是做为某一元素的背景图片，二是用img元素的属性。

首先给出网上查找的资料：

http://www.php100.com/html/program/divcss/2013/0904/1230.html​

https://paran.io/css-sprites-guidelines/​

http://www.5icool.org/a/201205/a1354.html​

http://www.cnblogs.com/nyzhai/archive/2013/08/02/3232713.html​

http://lichengguizy.blog.163.com/blog/static/11771858620105231013235/​

http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html（这个实例很棒）

http://www.cnblogs.com/babycool/archive/2012/04/15/2450187.html​（也很清楚）

方法一： 

用CSS中元素的background : background-color ||background-image || 

background-repeat || background-attachment ||background-position。 

示例代码如：

background:transparent url(123.jpg) no-repeat scroll -140px-20px; 参数解释如下： 

transparent表示透明无颜色 ；

url(123.jpg) 表示背景图片 ；

no-repeat 表示图片不重复 ；

scroll 表示背景图片随浏览器下拉而滚动；

-140px 表示水平位置在图片的-140px处（以图片的左上角为0,0） ；

-20px表示垂直位置在图片的-20px处。（以图片的左上角为0,0）为基准。

注意：

background-position: -100px -140px

必须要限定容器大小符合背景图元素位置 

另外 ,XY轴是相对于整张图片的左上角来算的 ,所以取值一定要算清楚

​方法二： 

用img的clip属性中的rect，clip:rect(y1 y2 x2x1)  参数说明如下：

 y1=定位的y坐标(垂直方向)的起点；

 x1=定位的x坐标(水平方向)的起点 ;

 y2=定位的y坐标(垂直方向)的终点 ; 

 x2=定位的x坐标(水平方向)的终点注:坐标的起点是在左上角 

​代码如下:

img{ position:absolute; clip:rect(20px 100px 50px 20px); }

上面可以看出控制图片显示的关键在于clip:rect(20px 100px 50px 20px)这句，

千万不要忘记: position:absolute; 这是用于使用绝对值来定位元素。 

二. jquerytooltips​

​    目前网上一搜，就有很多jQuerytooltips（信息提示框）插件，一开始自己傻傻写了一个信息弹出框，好不费劲，且丑。

但是网上搜了挺多，但是插件怎么使用却不知道了。后来找到一个博客，有关这个插件写得很清楚，怎么用也很清楚，且有

实例。这帮助我许多。

    推荐如下：名叫qTip的jQuerytooltips插件。

http://www.cnblogs.com/zhangliang0115/archive/2012/02/20/2359264.html​

    除此之外，其他链接如下：

官方网站：http://craigsworks.com/projects/qtip2/

在线演示：http://craigsworks.com/projects/qtip2/demos/

官方文档：http://craigsworks.com/projects/qtip2/docs/​

三.有关ps怎么获取csssprite需要的数据​

http://www.cnblogs.com/babycool/archive/2012/04/15/2450187.html

http://wenda.so.com/q/1367365822060326?src=110​​

http://blog.csdn.net/lijiacumt/article/details/7193698​

四.jquery 插件​

http://www.html580.com/11360/demo

http://www.ui3g.com/demos/show/794/

http://www.cnblogs.com/xiaoyao2011/archive/2011/10/13/2211036.html

http://www.runoob.com/jqueryui/jqueryui-download.html

http://www.poluoluo.com/jzxy/201110/144879.html