submit 和 button的区别

type=button      就单纯是按钮功能   
type=submit      是发送表单

但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一. 

用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

 

 

<input type="submit" name="b1" value="提交"     onClick="bt_submit_onclick()">
执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

<input type="button" name="b1" value="提交"     onClick="bt_submit_onclick()">
执行完onClick,跳转文件在 js文件里控制。提交需要onClick。

 

 

比如:

1,onclick="form1.action='a.jsp';form1.submit();"     这样就实现了submit的功能了。

2,<form    name="form1"    method="post"    action="http://www.sina.com.cn">   
       <input    type="button"    name="Button"    value="Button"    onClick="submit()">   
   </form>

3,<input    type="button"    name="Button"    value="Button"    onClick="javascript:windows.location.href="你的url"">

 

 

===============submit 和 button的区别=================================== 

 submit:特殊的button,会自动将表单的数据提交 ,onClick方法不加return 会自动提交,并不会起到约束的作用,所以,使用submit时需要验证请加 return 例: 
  <input type="submit" name="Submit" value="  注 册  " onClick=" return check();">  ,在JS中判断的时候 写return true 或者 return false

 button:普通的按钮,不会自动提交表单数据  可以在JS中显式提交:document.form1.submit(),使用场合: 一个页面有多个提交按钮,需要根据用户的操作来确定到底提交到哪个控制器,这种情况下,就需要在JS中判断用户的操作,然后根据操作来给document.form1.action赋值并且document.form1.submit()来提交

 

===============如果想好所有的提交都在一个servlet中处理,该怎么做==================
 提交的按钮也是HTML组件,所以也可以通过 getParameter()来
 得到,那么getParameter()的参数也需要固定下来
 参数就是所有的表单的提交按钮的name,当然提交按钮的name要一样才能统一在一个servlet中根据提交按钮的值来区别操作

 

======================关于路径的设置===================================
A。在页面中直接写路径,如 href="jsp/a.html" 表示 平级目录的访问,此例表示平级目录中有个JSP文件夹,访问的是文件夹中的a.html文件

B。在JAVA中直接写路径 如 response.sendRedirect("jsp/a.jsp")表示项目根目录下有个JSP文件夹,访问的是文件夹中的a.jsp文件

c.如果发现以上设置在浏览器中的地址栏不正确,可以采取绝对路径写法: 
  /工程名/文件夹名/文件名

************在以后的开发中可能有N多的文件夹N多的类和页面,在访问的过程中可能需要访问上几层中的文件夹
—–aaa文件夹      a.html
 |
 |——bbb文件夹  b.html
   |
   |
   |——-CCC文件夹  c.html
 

 如果想要在c.html中访问  a.html 有几 种写法: 
  1。 ../../a.html  说明:  ../表示上级目录
  2.  /工程名/aaa/a.html 说明:使用绝对路径

***********以上内容供以后开发复杂项目时参考,暂时作为了解
***********更改路径小窍门: 可以根据浏览器中地址栏显示出来的路径来有针对性的修改至正确的URL
  

========================默认显示页面=================================
当访问 web项目时,默认会显示根目录下的index.jsp or index.html文件

资料来源

http://www.cnblogs.com/Myhsg/archive/2008/08/14/1268201.html

http://blog.csdn.net/qianjunxian/article/details/4088515

 

今天在做拖拽效果的时候发现用a点击可以实现,用button与submit都不可以,搜索后有其他发现。转载之。

 

在IE6下 png背景图片透明和插入图片透明兼容解决

写在前面的话:我曾经找了个JS解决了png在IE6下的不透明。可是后来在做某个登录页面时,写了两个按钮的背景图片和Hover是两个不同圆角的,加上了JS可是按钮图片在碰触hover的时候出现的背景图片在IE6下出现的竟然还是不透明,有难看的青灰色边框。百思不得其解,后经过在各处寻找资料得到原来在IE6下,你的透明png图片在做背景图片,而不是直接插入的时候也会出现兼容问题。故总结此文,希望能帮上和我遇到同样问题的同学。

PNG图片,具有透明背景的png格式图片在IE6中却不是 背景透明的,透明背景部分会显示出#DBEAED的淡灰色,表现效果很糟糕,为了使用透明背景图片只有采用gif格式了,但是gif格式会出现明显的锯齿 效果,所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。

· 在PS切页的时候,保存为png24.(在某设计群讨论过png8和png24的区别。Png24无调色板、支持阿尔法-alpha通道的半透明、每个点阵都有透明度的定义,最低32位真彩色。)

下面的都是在png24保存下进行的。(因为png24的保存容量较大,建议只透明图片用png保存,其他img用gif、 jpg保存。)

方法1所能达到的效果是,在页面html上面插入的所有png图片能保持透明。

correctpng.Js (因为百度博客写的字数有限制,可以下载JS)

Html页面写<script type="text/javascript"  src="js/correctpng.js" ></script>

这个方法很快捷,优点是在页面html上面插入的所有png图片IE6I、IE7、 E8、 FF都能保持兼容透明。

缺点是:不过在处于在CSS中写的背景图时,在IE6会有灰色边框,不透明。解决方法是需要方法2

方法2:所需图片为png背景图的时候。可以用css属性写,用的是图图片路径调用(这也是少的原因,每个png图都要有路径写的是!import)。

.png{
background: url(/angel.png) no-repeat !important;  
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://images.baidu.com/angel.png");  
background:none;  
width:100px;  
height:100px;
}
HTML代码:
<div class="png">背景PNG透明<div>

以上代码使用了一些IE的Hack,IE7,IE8,Firefox直接应用_background,IE6则会应用filter!

方法2解释原理

应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的 “存在”,虽然IE7已经支持都是IE6还是不行。

虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:
IE5.5+的AlphaImageLoader滤镜

语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

了解了以上的内容,可以写一段简单的CSS代码(还不是完全正确的代码):

#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"

}

这段简单的CSS代码就可以在IE中正常的显示PNG透明背景,但是会发现在FF下不会出现背景,分析原因:
AlphaImageLoader滤镜只能被IE支持,FF是不支持该滤镜的
有些初次写的时候很多人会这样:
在代码中添加这样一段: background-image: url(bj1.png);
添加这样一段代码虽然能解决FF下的问题,都是IE又出现问题:新的背景会覆盖在滤镜的背景之上,导致滤镜显示无效,这时候就用到IE和FF对CSS读取的区别特性了:
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。代码如下:

html>body #div1 {
   background-repeat: repeat;background-image: url(bj1.png);
}

同时,我们通过只有IE才识别的通配符(*),来定义IE浏览器中的滤镜。代码如下:

* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")

}
而#div1 {}就放一些IE和FF共用的设置来减少代码文件的大小。最终就是这样:
#div1 {
   height: 600px;
   width: 260px;
   padding: 20px;
   background-repeat: repeat;
  

}

/* for ie7 ff*/
html>body #div1 {
     background:url(../images/menu1.png) no-repeat;
}
/* for ie6 */
* #div1 {
     background:none;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/menu1.png’, sizingMethod=’crop’);
}

需要注意的是:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。

主流浏览器对于CSS3与HTML5支持情况

数据来源:http://www.findmebyip.com/litmus/

支持 CSS3 和 HTML5 的浏览器越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。

需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。

CSS3 属性

可以看出,全盘支持 CSS3 属性的浏览器有 Chrome 和 Safari,而且不管是 Mac 平台还是 Windows 平台全支持。

 

CSS3 选择器

除了 IE 家族和 Firefox 3,其它几乎全部支持。Chrome,Safari,Firefox 3.6,Opera 10.5 成绩最好 。

 

HTML5 Web 应用

Safari 对 HTML5 Web 应用的支持最好,除了地理定位功能,其它都支持。

 

HTML5 网页内嵌对象

这应该是 HTML5 最令人期待的东西,内置的画布,视频,音频等对象。全部支持的有 Chrome,Safari,Firefox 3.6,Opera 10.5。IE家族则全军覆没。

 

HTML5 音频编码

Opera 10.5 支持的最全面,IE 家族又是颗粒无收。

 

 HTML5 视频编码

H.264 任重道远。

 

HTML5 各种表单对象

Mac 平台下的 Chrome 成绩最佳。这些表单对象让人想起了桌面程序。

 

HTML5 表单对象属性与行为

又一次想到了桌面程序。

 

结论

目前,对 CSS3 和 HTML5 支持最好的是 Safari,Chrome 次之,Firefox 3.6 和 Opera 10.5 旗鼓相当,IE家族最差。鉴于这种情况,假如你想使用这两项新技术创建一个先锋体验式站点,现在的 CSS3 和 HTML5 可以让你实现,假如你希望这个站点能被绝大多数人正常访问,现在还为时过早,折中的方案是,为不支持 CSS3 和 HTML5 某些功能的浏览器提供降级方案,当然,其中要涉及到很多问题,包括浏览器,版本,平台的探测,CSS Hack 等等大量工作,相信是得不偿失的。

css圆角

【转载】uecss.com

css3和html5 在大家的眼中已经不是什么新鲜的事了,但是能兼容它的浏览器却不是全部,而我只是简单的看了它们的一些属性,简单的性的了解了一下。前些时间一个同事让我写一个圆角的div,要求是尽量少放图片,我想到了css3中有这个属性
在网上查了查发现写圆角的方法还是有很多的。大概的总结了以下几点:

1.灵活的圆角

为了能让圆角更加灵活,我们可以把容器里的每个圆角都做成一个独立的元素,通过CSS强行定位到父容器的四个角上。在这个方法里,我们只需要用到下边这个图片。

HTML:

<div class="box">  

 <span class="crnr tl"></span>  <span class="crnr tr"></span> 

 <h3>This is a heading</h3> 

 <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p> 

 <span class="crnr bl"></span> <span class="crnr br"></span> 

</div>

CSS

.box{

         position:relative;

         width:200px;

         height:300px;}

.crnr{

         position:absolute;

         background:url("http://uecss.com/wp-content/uploads/2010/04/crnr-sprite.jpg")no-repeat;

         width:20px;

         height:20px;

 }

.tl{

        left:0;

        top:0;

        background-position:00;

}

.tr{   right:0;

        top:0;

        background-position:-20px0;

}

.bl{   

          left:0;

          bottom:0;

          background-position:0-20px;

}

.br{right:0;bottom:0;background-position:-20px-20px;}

优点:能自动适应父容器的大小,浏览器兼容性非常强。

缺点:为了实现圆角,添加了一些没有意义的标记。

2.Border radius(边界半径)

css3中为boder增加的一个属性border-radius,目前这个属性已经被Firefox和Safari 3(Chrome)支持,比较遗憾的是IE不支持此属性。

HTML:

<div class="box"> 

 <h3>This is a heading</h3> 

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p> 

</div>

CSS:

.box{width:200px;height:200px;background-color:#EE2E24;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}

优点:这种方法不需要添加任何多余的标记,而且可以非常方便睇修改圆角的半径,是最易上手的方法。

缺点:虽然符合W3C的标准,但缺乏浏览器支持。

3.多个背景图片

CSS3对background属性做出了一些重大改进,在CSS3标准里,我们可以把多个背景图片应用到同一个元素里。我们利用这个特性为容器加 上圆角效果。HTML代码与上例保持一致,在CSS中需要先把四个圆角的图片分别做好

CSS:

.box{

background:url(top-left.gif)topleftno-repeat,

                      url(top-right.jpg)toprightno-repeat,

                      url(bottom-left.gif)bottomleftno-repeat,

                      url(bottom-right.gif)bottomrightrepeat-y;

}

优点:没有多余的标记,可以分别设置每个圆角的半径。

缺点:使用了W3C未明确定义的方法,浏览器兼容性很差,目前只有Safari和Chrome对此方法支持良好。

4.结合CSS3和JavaScript,兼容所有浏览器

这是一种很不错的实现跨浏览器圆角的解决方案,结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费J该脚本的最大优势是可以在Safari/Chrome/Firefox中
使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:avaScript库。

下载这个js

然后引用

<script type="text/javascript"src="curvycorners.js"></script>

然后定义以下样式:

.box{

        width:220px;

        padding:10px;

        background-color:#DDEEF6;

        border:1pxsolid#DDEEF6;/* Do rounding (native in Safari, Firefox and Chrome) */-webkit-border-radius:6px;-moz-border-radius:6px;}

然后在上面的样式后面定义以下代码:

<script type="text/JavaScript">addEvent(window,’load’,initCorners);

functioninitCorners(){varsetting={tl:{radius:6},tr:{radius:6},bl:{radius:6},br:{radius:6},antiAlias:true}curvyCorners(setting,".roundedCorners");}</script>

tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等) 你可以像这样在前面的代码中定义:

…curvyCorners(setting,".roundedCorners");

curvyCorners(setting,".roundedCorners_1");

curvyCorners(setting,".roundedCorners_2");…

HTML代码如下:

<div class="box"> </div>

这样圆角的效果就出现了!

常用的10种CSS BUG解决方法与技巧-浏览器兼容教程

 

CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。
非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。
轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。
希望对您的学习、工作有所帮助,如果您依然有疑问,

一、 针对浏览器的选择器

  这些选择器在你需要针对某款浏览器进行css设计时将非常有用.
  IE6及其更低版本
  * html {}
  IE7及其更低版本
  *:first-child+html {} * html {}
  仅针对IE7
  *:first-child+html {}
  IE7和当代浏览器
  html>body{}
  仅当代浏览器(IE7不适用)
  html>/**/body{}
  Opera9及其更低版本
  html:first-child {}
  Safari
  html[xmlns*=""] body:last-child {}
  要使用这些选择器,请将它们放在样式之前. 例如:

div css xhtml xml Example Source Code Example Source Code#content-box {
width: 300px;
height: 150px;
}
div css xhtml xml Example Source Code Example Source Code * html #content-box {
width: 250px;
}

二、让IE6支持PNG透明

  一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。
  你需要使用一个css滤镜

div css xhtml xml Example Source Code Example Source Code*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
三、移除超链接的虚线

  FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入:

div css xhtml xml Example Source Code Example Source Codeoutline:none.
a{
outline: none;
}很实用

四、给行内元素定义宽度

  如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.

div css xhtml xml Example Source Code Example Source Code span { width: 150px; display: block }
五、让固定宽度的页面居中

  为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.

div css xhtml xml Example Source Code Example Source Code#wrapper {
margin: auto;
position: relative;
}margin:0 auto;这个也可以 还有 text-aglin:center;为了火狐和IE兼容
七、IE6双倍边距的bug

  给此对象加上display:inline即可解决问题。

八、图片替换技术

  用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.

div css xhtml xml Example Source Code Example Source CodeHTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
  你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片. text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.
  关掉css,然后看看头部会是什么样子的.

九、 最小宽度

  IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:

div css xhtml xml Example Source Code Example Source Code.container {
min-width:300px;
}
  为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:

div css xhtml xml Example Source Code Example Source Code <div class="container">
<div class="holder">Content</div>
</div>
  然后你需要定义外层div的min-width属性,
div css xhtml xml Example Source Code Example Source Code .container {
min-width:300px;
}
这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

div css xhtml xml Example Source Code Example Source Code* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
  As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.

十、隐藏水平滚动条

  为了避免出现水平滚动条, 在body里加入 overflow-x:hidden .

div css xhtml xml Example Source Code Example Source Code body { overflow-x: hidden; }
  当你决定使用一个比浏览器窗口大的图片或者flash时, 这个技巧将非常有用.

CSS sprites 精灵图片

引言:

  提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数,为了减少HTTP请求次数,最直接有效的方法是使用精灵图片(CSS sprites),精灵图片是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

本文的目的不是阐述精灵图片如何让网页下载更快,而是介绍在创建精灵图片时的一些实战经验。

下面是一张精灵图片
CSS Spriting 不要等你完成所有工作后再开始使用CSS精灵

在网站全部完成后,你的CSS和图片也都已经创建好了,这时候你再使用CSS精灵,也就意味着你要返回重写CSS,并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片,这是非常痛苦和乏味的。如果在刚开始构建页面时就着手使用CSS精灵,那么一切都会变得简单。

按图片显示相反的方向放置图片

这一条有点难以理解,我是在创建一张大的精灵图片中途失败后才意识到它的。假如一张图片应该出现在一个元素的左边,如下图
appear-left
请将这张图片放在精灵的右边(看上面的示例精灵图片)。用这种方式处理后,当你用CSS移动背景图片时,不可能会有别的图片会(错误的)显示处理。

避免在CSS使用bottom或right定位

当定位CSS精灵中靠后的图片时,使用类似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初,这一切都能正常工作,但是,一旦你的CSS精灵宽度或高度增加时,你刚才使用的定位方式就发现了错误,因为图片相对右边或者底边的距离已经发生了变化。所以,请使用left和top来定位。

为每张图片留出足够空隙

正如你所看到文章中提供的例子精灵图片一样,许多小图片间都预留了很多空白。为什么不把图片挤得紧凑点让精灵图片尺寸更小点呢?因为使用元素的地方可能包含各种不同的内容,这些内容会导致容器变宽变高,预留了足够的空白的话,在容器大小发生变化时,可以避免其他的图片显示出来。

这有一个例子:
为每张图片留出足够空隙

每个列表都使用一个数字图片作为背景。看看上面的示例CSS精灵,你会发现这几张图片是交错排列的,这样处理后,不管怎么增加,其他的图片都不会显示出来。

不要担心CSS精灵的尺寸大小

如果你有机会以标准的web设计来设计你的网站,那么你必定要将把很多图片放到精灵图片上,并且为这些图片预览出合适的空隙,这很好。精灵图片中的空白空隙不会增加太多文件的体积,在addons.mozilla.org网站上使用的精灵图片尺寸是1,000×2,000,但它仅16.7kb!

原文Url:http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

相关阅读:http://www.alistapart.com/articles/sprites

起因:以前在某技术群问过——为什么淘宝之类的大型网站,小图标都在一张图上。

            记得当时的群友给的解答是因为路径一致,访问的时候就在一个图片上了。后来也有些疑惑,为什么有的图片另存就是一张一个,有的另存竟然是一张N个呢。前天才知道原来这是利用的css 精灵,和在一张图片上,利用xy轴的坐标来定位。减少文件体积、减少对服务器的请求次数,提高效率。