<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册登录界面</title>
<style type="text/css">
#connter{
height: 900px;
width: 1400px;
background-image: url(../img/3.jpg);
background-size: cover;
opacity:0.8;
margin: auto;
}
#a1{
width: 550px;
height: 400px;
position:absolute;
left:680px;
top:150px;
background-color: rgba(255,255,255,0.4);
/* margin: auto; */
}
table{
width: 550px;
background-color: none;
}
.td1,.td2{
color: #008000;
}
.td1{
text-align: left;
font-size: 25px;
}
.td2{
text-align: right;
}
#middle{
background-color: #33AE77;
color: white;
width: 550px;
line-height: 40px;
}
span{
font-size: 20px;
margin-left: 20px;
}
#foot{
width: 550px;
}
#foot td{
line-height: 30px;
}
.b1,.b2,.b3{
text-align: right;
color: dimgrey;
}
.b4{
max-width: 20;
}
#a2{
line-height: 30px;
background-color: #33AE77;
color: white;
width: 170px;
margin-top: 20px;
margin-left: 150px;
}
button{
border: none;
border-radius: 5px;
}
a{
margin-top: 30px;
margin-left: 150px;
font-size: 12px;
}
a:link{
color: dimgrey;
text-decoration: none;
}
.b7{
position: absolute;
bottom: 168px;
}
</style>
</head>
<body>
<div id="connter">
<div id="a1">
<div id="top">
<table border="0" cellspacing="" cellpadding="">
<td class="td1">小a陪诊</td>
<td class="td2">首页 | 用户注册</td>
</table>
</div>
<div id="middle">
<span>登录</span>
</div>
<div id="foot">
<form action="" method="post">
<table border="0" cellspacing="" cellpadding="" style="margin-top: 50px;">
<tr>
<td class="b1">用户名:</td>
<td></font><input type="text" name="username" id="" value="" /></td>
</tr>
<tr>
<td class="b2">密码:</td>
<td><input type="password" name="psw" id="" value="" /></td>
</tr>
<tr>
<td class="b3">验证码:</td>
<td class="b4"><input type="text" name="yanzheng" id="" value="" style="width: 90px;"/><img src="../img/4.png" class="b7"></td>
</tr>
<tr>
<td class="b5" colspan="2"><button type="button" id="a2">登录</button></td>
</tr>
<tr>
<td class="b6" colspan="2"><a href="www.">忘记密码?</a></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
微信图片_20190514203955.png