day30-登录界面实现

实现一个简单的html界面

注：用到了大量的margin和padding来调整位置，当然怎么安排最好就仁者见仁智者见智了
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body {
                background: url(img/bkg.jpg) no-repeat 0 120px;
                background-size: 100% auto;
                background-color: orange;
            }
            #rect {
                width: 400px;
                margin-top: 10%;
                margin-right: 5%;
                padding-left: 40px;
                float: right;
                background-color: white;
                border-radius: 8px;
            }
            #login {
                font-family: "黑体";
                font-size: 20px;
                margin-left: 20px;
            }
            #b_foot {
                margin-left: 20px;
                margin-bottom: 20px;
                margin-top: 20px;
                color: darkgray;
            }
            #foot {
                margin-bottom: 20px;
                margin-right: 35px;
                text-align: right;
                color: darkgray;
            }
            .input1 {
                height: 40px;
                width: 300px;
                margin: 20px;
                background-position: 0px 0px;
                font-size: 20px;    
                border-radius: 5px;
                border: 0;
                background-color: lightgoldenrodyellow;
            }
            .sum {
                width: 345px;
                height: 40px;
                margin: 20px;
                background-color: orangered;
            }
            
        </style>
    </head>
    <body>
        <div id="rect">
            <p id="login"><strong>密码登录</strong></p>
            <form action="" method="get">
                <div>
                    <input class="input1" type="text" name="username" id="username" placeholder="请输入用户名" style="background: url(img/user.jpg) no-repeat 0 0;padding-left: 45px;"/>
                </div>
                <div>
                    <input class="input1" type="password" name="pwd" id="pwd" placeholder="请输入密码" style="background: url(img/pwd.jpg) no-repeat 0 0;padding-left: 45px;"/>
                </div>
                
                <button class="sum" style="border: 1px; text-align: center; color: white; font-size: large;">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
            </form>
            <div id="b_foot">
                <img src="img/zfb.jpg" />支付宝登录&nbsp;&nbsp;&nbsp;<img src="img/wx.jpg" />微信登录
            </div>
            <div id="foot">忘记用户名&nbsp;&nbsp;&nbsp;忘记密码&nbsp;&nbsp;&nbsp;免费注册</div>
        </div>
    </body>
</html>
效果图

image.png