一直想学习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