html简单登陆页面

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>登陆页面</title>
 <style type="text/css">
 *{margin:0;padding:0;}
 body{width:100%;height:100%;/*background-color: #88f;*/font-family: "Microsoft Yahei";}
 #wrap{width: 300px;height: 200px;background-color: pink;border:1px dotted green;position: absolute;left: 50%;top: 50%;margin-top: -100px;margin-left: -150px;}
 #wrap h2{height:30px;width:240px;line-height: 30px;margin:15px 30px;font-size: 28px;color: grey;font-weight: bold;}
 #wrap .maininfo{width: 250px;margin:0 auto;/*background-color: yellow;*/}
 #wrap .maininfo label{font-size: 14px;line-height: 20px;}
 #wrap .maininfo input[type="text"],#wrap .maininfo input[type="password"]{width:235px;padding-left:6px;padding-right:6px;line-height: 20px;font-size: 14px;}
 #wrap .oper{width: 250px;/*background-color: blue;*/margin:10px auto;}
 #wrap .oper input[type="button"]{float: right;height:25px;width:40px;background-color: green;}
 </style>
</head>
<body>
 <div id="wrap">
  <h2>Chats</h2>
  <div class="maininfo">
   <label for="user">用户名<small>(请输入UM账号或者域账号)</small></label><br/>
   <input type="text" id="user" placeholder="请输入用户名称"/><br/>
   <label for="pwd">密码</label><br/>
   <input type="password" id="pwd"/>
  </div>
  <div class="oper">
   <input type="button" value="登陆" id="loginBtn" />
  </div>
 </div>
</body>
</html>

效果图:

html简单登陆页面_第1张图片

PS:这个例子太神了http://www.jb51.net/css/66889.html完美解决margin:0 auto;浏览器兼容性问题

margin:0 auto;浏览器兼容性问题:在FF、chrome都可以居中,但是在IE6/7/8不能居中。

解决方法一
可以是对网页主体<body>声明文本居中,即body{text-align:center}
即:

 <style type="text/css">
 body{text-align:center}
 #con{width:980px;martin:0 auto;}
 </style>
 <div id="con">margin: 0 auto 内容居中显示</div>

解决方法二
其实和解决方法一差不多,只是在要居中的div外层添加多一个div,并使其居中
即:

<style type="text/css">
 #con{width:980px;martin:0 auto;}
 </style>
 <div style=“text-align:center”><div id="con">margin: 0 auto 内容居中显示</div></div>

解决方法三
出现这个现象的原因在于文档的DTD声明;
修改DTD为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Summary:我更推崇最后一种方法,来解决margin:0 auto;浏览器的兼容性,主要就是没有在文档最顶端声明DOCTYPE,因为前两种方法都是治标不治本的,并没有从根本上解决问题。
 

你可能感兴趣的:(auto,页面,登陆,浏览器兼容性,margin:0)