一. 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