要求： 完成以下圖片所示登錄界面
QQ圖片20190514191050.png
<!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">首頁(yè) | 用戶注冊(cè)</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="請(qǐng)輸入用戶名" class="div4" style="top:50px; width:150px;"/><br />
<font class="div3" style="top: 80px;">密碼:</font> <input type="password" name="密碼" placeholder="請(qǐng)輸入用戶名" class="div4" style="top:80px; width:150px;"/><br />
<font class="div3" style="top: 110px;">驗(yàn)證碼:</font> <input type="text" name="驗(yàn)證碼" 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 class="div4"style="top:170px; font-size: 10px;">忘記密碼?</a>
</div>
</body>
</html>
def.png
