要求: 完成以下图片所示登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小a陪诊</title>
<style type="text/css">
body{
background-image: url(img/tiddg.jpg);
}
.div1{
background-color: white;
width: 350px;
height: 200px;
left: 500px;
top: 80px;
position: absolute;
}
#id3{
background: green;
}
#id5{
padding: 6px;
font-size: 15px;
}
.div3{
position: absolute;
right: 260px;
font-size: 14px;
}
.div2{
position: absolute;
width: 350px;
height: 200px;
left: 500px;
top: 50px;
}
#id1{
position: absolute;
left: 3px;
font: "微软雅黑";
font-size: 20px;
color: forestgreen;
top: 3px;
}
#id2{
position: absolute;
right: 3px;
font-size: 10px;
top: 10px;
}
.div4{
position: absolute;
left: 100px;
}
#id3{
position: absolute;
width: 350px;
font-size: 20px;
height: 30px;
}
#id6{
position: absolute;
left:175px;
}
</style>
</head>
<body>
<div class="div2">
<span id="id1">小a陪诊</span>
<span id="id2">首页 | 用户注册</span>
</div>
<div class="div1">
<div id="id3"><div id="id5">登录</div></div>
<form action="" method="post">
<font class="div3" style="top: 50px;">用户名:</font> <input type="text" name="账户名" placeholder="请输入用户名" class="div4" style="top:50px; width:150px;"/><br />
<font class="div3" style="top: 80px;">密码:</font> <input type="password" name="密码" placeholder="请输入用户名" class="div4" style="top:80px; width:150px;"/><br />
<font class="div3" style="top: 110px;">验证码:</font> <input type="text" name="验证码" class="div4" style="top:110px; width:70px;"/><br /><img src="img/swhg.png" style="top:110px; width:70px;" id="id6"/>
<button type="submit" class="div4" style="top:140px; width:150px; background-color: blue;">登录</button>
</form>
<a href="https://www.yihu.com/YihuArticle/1082.shtml" class="div4"style="top:170px; font-size: 10px;">忘记密码?</a>
</div>
</body>
</html>