<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0 auto;
padding: 0;
}
html{
margin: 0;
margin: 0;
height: 100%;
}
body{
background-color: #EEEEEE;
width: 100%;
min-height: 100%;
}
a{
text-decoration: none;
}
.content{
position: relative;
width: 400px;
height: 350px;
top: 200px;
}
.top{
width: 100%;
height: 50px;
color: green;
}
.top #top-left{
float: left;
}
.top #top-right{
padding-top: 20px;
float: right;
}
.top #top-right a{
color: green;
}
.center{
width: 400px;
height: 300px;
position: relative;
border-radius: 5px;
background-color: #FFFFFF;
}
.center #title{
width: auto;
height: 25px;
padding: 10px;
color: #FFFFFF;
font-size: 18px;
border-radius: 5px;
background-color: green;
}
.hr20{
border: none;
height: 20px;
margin: 0;
padding: 0;
width: 100%;
}
.center font{
float: left;
width: 120px;
height: 30px;
font-size: 20px;
text-align: right;
}
.center input{
float: left;
margin-left: 10px;
width: 180px;
line-height: 20px;
text-align: left;
}
#subbtn{
width: 100%;
height: 30px;
padding: 0 0 0 100px;
}
#subbtn input{
width:180px;
height:30px;
background-color: green;
border: 0;
border-radius: 3px;
color:#FFFFFF;
font-size:14px;
text-align: center;
cursor:pointer;
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<div id="top-left"><h1>小a陪诊</h1></div>
<div id="top-right">
<span><a href="">首页</a></span>
<font>|</font>
<span><a href="">用户注册</a></span>
</div>
</div>
<div class="center">
<div id="title">登录</div>
<form action="" method="post">
<hr class="hr20" />
<font>用户名:</font>
<input type="text" name="username" value=""/><br />
<hr class="hr20" />
<font>密码:</font>
<input type="password" name="pwd" value=""/><br />
<hr class="hr20" />
<font>验证码:</font>
<input type="text" name="yz" value=""/><br />
<hr class="hr20" />
<div id="subbtn">
<input type="submit" value="登录"/>
</div>
<div style="padding-top: 15px; padding-left: 40px;"><a href="#" style="color: black;">忘记密码？</a></div>
</form>
</div>
</div>
</body>
</html>
效果图
