解决ufeff

把utf-8编码文件的BOM头去掉。
可以编写程序,检测文件头的三个字符是否为0xEF、0xBB和0xBF,
如果是的话,直接删除掉即可。

也可以用Notepad++
打开文件重新编辑,设置为无BOM头的utf-8编码。

关于CSS Sprites图片整合技术

CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿,当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片,即加快页面加载速度。本质是将用到的图片都集成为一张大图片,然后通过CSS的background-image和background-position属性进行定位,显示图片的不同部分。

一、适用哪里:CSS Sprites常用来合并频繁使用的图形元素,如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现,因为涉及内容的图片并不是每个页面都一样。

CSS Sprites一般只能使用到固定大小的容器里,这样才能够遮挡住不应该看到的部分。必须限制容器的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。当然,加大图片之间的距离,这样可以保持有限度的缩放。

二、具体实现:

1、图片合并:用photoshop将小图片们合并到一张大图上。

①合并之前就要仔细考虑它们的布局问题,以免不该出现的图片扰乱页面。例如下图这种背景一般用在文本列表中,实际应用的时候列表的行高往往比背景中的序号要大,所以在背景合并图片中间距应该比一般小图要大些,这样在页面中就不会将其它的小图给显示出来。

②在页面小图很多,需要做成多个sprites图片时,可以按颜色分类,尽量将相同、相近颜色的小图整合在一张大图上,这样可以有效减小合成后图片的体积。

③ 如果是规模较大的站,可以把需要横向平铺的所有图片做成一个图,需要纵向平铺的做成第二个图,把双向的和颜色非常复杂的单独放,其它的都做在一个图里。

④在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大;在面积相同的CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。

2、图片定位background-position:大图片的左上角坐标为(0,0),用photoshop分别读取各个子图片的坐标值(窗口→信息)。

举例:用ps把红、黄、蓝色三个子图50px*50px整合到一张图片上。

css样式如下:css

html代码:

html

网页效果:

关于 background-position负值的理解:固定好大小的容器,相当于一个窗口,这个窗口的位置是固定不动的,想通过这个窗口来显示背景图片上的指定子图片,就得移动这个背景图片,使指定子图出现在这个窗口。这个背景图片向左、向上移动是负值,那么相反,向右、向下移动就是正值。

html中的map标签

工作中需要制作一个“返回到页首”的小圆图标,

用到了map标签,如下:

<img border=”0″ usemap=”#Map” src=”top.gif”>

<map id=”Map” name=”Map”>
<area href=”#top” coords=”30,30,30″ shape=”circle”>
</map>

其中,img标签是与map标签配合使用的,缺一不可。

img标签内还需绑定映射map标签的ID,

接下来在map标签内的area元素中,就可以定义img图片可点击的范围。

可以有circle圆形,rect矩形,poligon多边形。

上述代码为图片热区为圆形的例子,

coords=”30,30,30″内的第一个30表示圆心x坐标,第二个30表示圆心y坐标,第三个30为圆的半径。