Code Engineer

很多CSS框架里都有reset.css这个文件，这个文件一般就是CSS RESET文件

它是做什么用的呢？简单的说就是重置浏览器的CSS默认属性，为了更好的做CSS浏览器兼容性问题。比如：

* { padding: 0; margin: 0; border: 0; }

这样把所有的HTML标签的padding和margin都重置为0；

为什么要这样做？ 浏览器和浏览器之间对某一个标签的CSS定义有所不同，比如：IE下的按钮和FF下的按钮样式就不大一样，body的margin也不一样，其他浏览器都有自己独特的CSS定义，所以我们要建立自己的统一标准，这样对后面的各个浏览器兼容问题有很大的帮助。

怎么使用？

把你的CSS RESET代码写如到一个CSS文件里，比如：reset.css，然后在HTML页面里引用它就可以了，注意：reset.css必须在其他CSS文件之前引用。

下面是我常用的CSS RESET

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
padding: 0; 
margin: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset,img { 
border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-weight: normal; 
font-style: normal; 
} 
ol,ul { 
list-style: none; 
} 
caption,th { 
text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-weight: normal; 
font-size: 100%; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border: 0; 
}

 

兼容性

先从简单的说

1、绘制验证码图片：

我这里用GD2来实现的

先绘制画布

$im = imagecreate(66,18);//画布大小
$back = ImageColorAllocate($im, 245,245,245); //创建颜色
imagefill($im,0,0,$back); //把颜色填充到画布里

在画布上绘制数字

$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255)); //创建随机颜色
$s1=rand(1,9); //创建随机数字1-9
imagestring($im, 5, 2+0*10, 1, $s1, $font); // 在画布上绘制数字

到这里验证码基本绘制就完成了

如何加入加法运算？

原理是这样：绘制4个随机数字，第1个是被加数的十位，第2个是被加数的各位，第3个是被加数的十位，第4个是被加数的各位，然后在第2个数字和第3个数字之间绘制一个加好（+），在最后面绘制个等号（=）绘制功能就完成了。接下来算出结果，公式$scode=$s1*10+$s2+$s3*10+$s4，就是把十位上数字都乘以10然后再相加就可以了。

如何验证验证吗？

验证码在显示的时候我们把生成的结果存在一个session值里 $_SESSION['scode'] = $scode; 然后和用户输入的验证码做对比，这样就能知道用户输入的验证码是否正确。

以下是完整代码

session_start();
//生成验证码图片
Header("Content-type: image/PNG");
$im = imagecreate(66,18);
$back = ImageColorAllocate($im, 245,245,245);
imagefill($im,0,0,$back);

$scode=0;

srand((double)microtime()*1000000);

$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));
$s1=rand(1,9);
imagestring($im, 5, 2+0*10, 1, $s1, $font);

$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));
$s2=rand(1,9);
imagestring($im, 5, 2+1*10, 1, $s2, $font);

$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));
imagestring($im, 5, 2+2*10, 1, '+', $font); 

$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));
$s3=rand(1,9);
imagestring($im, 5, 2+3*10, 1, $s3, $font);

$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));
$s4=rand(1,9);
imagestring($im, 5, 2+4*10, 1, $s4, $font);

$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));
imagestring($im, 5, 2+5*10, 1, '=', $font); 

for($i=0;$i<100;$i++) //加入干扰象素
{
 $randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
 imagesetpixel($im, rand()%70 , rand()%30 , $randcolor);
}
ImagePNG($im);
ImageDestroy($im);
$scode=$s1*10+$s2+$s3*10+$s4;
$_SESSION['scode'] = $scode;

验证码