html 写的一个登录界面

来源:互联网 发布:阿里云域名认证失败 编辑:程序博客网 时间:2024/06/05 17:58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/xing.css" />
  </head>  
  <body>  
  <div id="content" style="margin:0 auto; background-color:#0F6; width:1000px; height:500px; position:relative;">


  <div class="login" style="position:absolute; top:50%;left:50%;margin-top:-100px;margin-left:-200px;background:#69F; width:400px; height: 200px; border-radius:10px;">
      <div style=" margin-left:100px;margin-top:50px">
        <p style="display:inline">用户名:</p>
            <input type="text" value="123"/>
      </div>
      <div style="margin-left:100px;margin-top:20px">
        <p style="display:inline">密&nbsp;码:</p>
            <input type="password" value="123"/>
      </div>
      <div style=" text-align:center;margin-top:20px">
        <input class="button" type="button" value="登录" style="margin-right:10px; padding:5px 15px; background:#F9C; border-radius:3px; border:#F0C 1px solid;"/>
            <input class="button" type="button" value="重置" style="padding:5px 15px; background:#F9C; border-radius:3px; border:#F0C 1px solid;"/>
      </div>
     </div>
    </div>    
  </body>  

</html> 


整体居中,效果还可以。

0 0
原创粉丝点击