CSS Sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
优点:
当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。
实现方法:
1,首先将小图片整合到一张大的图片上
2,然后根据具体图标在大图上的位置,给背景定位。
3小图片排列方面:颜色相近的图片放在一起,可以减少输出的色数,进一步降低文件体积。
4.整合图片生成方面:PNG8的图像比GIF图像要小30%左右。
但是在整合图片的过程中也要注意:并不是所有的图片都是应该整合到这张巨图上的,比如一些广告、照片、大的栏目标题背景,这类图片不适合用作图片整合。CSS Sprites主要面向那些“更多”“登陆”“注册”之类的小图标,网站规模一般是比较大的。
相关文档:
阿里巴巴的一款滑动分类菜单,效果很不错,但是使用了较多的图片,不过这些图片只是背景,不影响你修改菜单的文字,所以很值得大家使用,代码稍嫌多,学习CSS的朋友好好研究一下.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ......
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.main{position:relative;width:100%}
.left{position:absolute;width:200px;border:solid 1px red; height: ......
Css 图解margin 和 padding 的区别
以前常常以为margin 和 padding的区别,而老是google,现在理清了...
图解:
margin : 相当于组件的 外边缘 与外部组件的距离
padding : 相当于组件的 内边缘 与内部组件的距离 ......
CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点。
常见兼容问题:
1、DOCTYPE 影响 CSS 处理
2、FF:div 设置 margin-left, margin-right 为 auto 时已经居中,IE 不行
3、FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margi ......
解决方法:
1、
用css滤镜。
<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_img.jpg', sizingMethod='scale'" >
2、
你可以考虑用css滤镜来做背景渐变效果,设置td的css
style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFFFFF' ......