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主要面向那些“更多”“登陆”“注册”之类的小图标,网站规模一般是比较大的。
相关文档:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双色表格CSS实例</title>
<style type="text/css">
#DataGrid1 tr {
background-color: expression(
this.sectio ......
<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: ......
JavaScript作用小结:
1 创建脚本块
1: <script language=”JavaScript”>
2: JavaScript code goes here
3: </script>
2 隐藏脚本代码
1: <script language=”JavaScript”>
2: <!--
3: document.write(“ ......
Css 图解margin 和 padding 的区别
以前常常以为margin 和 padding的区别,而老是google,现在理清了...
图解:
margin : 相当于组件的 外边缘 与外部组件的距离
padding : 相当于组件的 内边缘 与内部组件的距离 ......
'################################################
'## 功 能:获取文件名 ##
'## 输入参数:文件路径 &nb ......