day20_task_简单登录界面

要求：完成以下图片所示登录界面
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">首页 &nbsp;|&nbsp;&nbsp;用户注册</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>
def.png
day20_task_简单登录界面

推荐阅读更多精彩内容
