一直想学习css，看了很多书，知识点感觉知道了，就是做起来还是什么都不知道，现在开始把别人原来table实现的页面用css自己实现来实践，今天来个简单的登陆页面：
收获如下：
1. 刚开始想把登陆这个窗口居中表示，用了margin：0 auto;结果只有火狐符合，ie不符合，最后解决的方法是这样的：
刚开始的doctype类型是这样的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，后来改为下面这种方式就一样了，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.学到了一种让div垂直并水平居中的方法：
#main{
position : absolute;
top : 50%;
left : 50%;
margin : -150px 0 0 -250px; //刚开始最不理解的是这行代码吧
width : 500px;
height : 300px;
background-color : #f1f3cd;
}
在不设置这个属性的时候,这个div的x坐标为内容显示部分的50%，y坐标为内容显示部分的50%，显示出来的然而这样的话只能说这个div的起点是在正中间，我们需要的是将整个div显示在正中间,所以给margin-left:-150px;(这里的150是从width属性中得来的它是等于width的一半,对应的margin-top也是通过通样的方法得来的。)这样就会把整个div的宽度分一半到左边就可以让其水平居中 了，在设置margin-top:-250px;是同样的道理，会将整个div的高度分一半到上面显示。就形成了整个div在浏览器的正中间显示。
3.对齐火狐和IE的用户名和密码的时候出现不一致的情况解决办法，导致原因是因为火狐和IE默认的编码格式不一样，所以，可以在body出设置编码格式，这样就可以解决问题了。示例如下：
body {
font-size:12px;
font-family:"宋体";
}
4.整个页面的背景是图片水平扩展的，出现了素质方向高度不够的情况，我是这样解决的，设置跟图片底部一样的背景色，这样很可以很好的衔接起来。
我实现的登陆页面如下：
最后我实现的代码可以从这里免费下载：http://download.csdn.net/detail/jone_wan/4916892
1226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
