JS-会员登录页面

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>会员登录</title>
    <link rel="stylesheet" href="00-homework-login.css">
 </head>
 <body>
  <div id="container">
        <h2 class="title">会员登录</h2> 
        <!-- 下 左 ：图片 -->
        <p>
            <img src="Images/huiyuan.jpg">
            <a href="#">会员注册&gt;</a>
        </p>
        <!-- 下 右 ：登录form -->
        <div id="login">
            <form action="login" method="post">
                <!-- 第一行：手机号 -->
                <div class="form-line">
                    <p>手机号</p>
                    <div>
                        <input type="text" name="uphone" class="form-control">
                    </div>
                </div>
                <!-- 第二行：密码 -->
                <div class="form-line">
                    <p>密码</p>
                    <div>
                        <input type="password" name="upwd" class="form-control">
                    </div>
                </div>
                <!-- 第三行：记住密码 -->
                <div class="form-line">
                    <p></p>
                    <div>
                        <p>
                            <a href="#">忘记密码</a>
                            <a href="#">快捷登录</a>
                        </p>
                        <input type="checkbox" name="isSaved" class="isSaved" id="isSaved">
                        <label for="isSaved">记住密码</label>
                    </div>
                </div>
                <!-- 第四行：登录 & 注册会员 -->
                <div class="form-line">
                    <p></p>
                    <div>
                        <a href="#" class="register">注册会员</a>
                        <input type="submit" value="登录" class="btnLogin">
                    </div>
                </div>
            </form>
        </div>
    </div>
 </body>
</html>

body,h1,h2,h3,h4,h5,h6,p{
    margin:0;
}
#container{
    width:990px;
    margin:20px auto;
    overflow:hidden;
}
#container h2.title{
    color:#adadad;
    border-bottom:1px solid #adadad;
    padding-bottom:20px;
    font-weight:normal;
    margin-bottom:40px;
}
#container>p{
    float:left;
    /*相对定位：配合 a 标记做绝对定位*/
    position:relative;
}
#container>p>a{
    /*绝对定位，位置偏移，宽度，高度，边框，倒角，文本：水平居中对齐，行高，取消下划线，颜色，大小*/
    position:absolute;
    left:185px;
    bottom:30px;
    width:130px;
    height:40px;
    border:1px solid #64a131;
    box-sizing:border-box;
    border-radius:5px;
    text-align:center;
    line-height:40px;
    text-decoration:none;
    color:#64a131;
    font-size:18px;
}
/******下 右：登录 form******/
#login{
    float:right;
    /*上外边距：调整位置*/
    margin-top:75px;
}

#login .form-line{
    overflow:hidden;
    margin-bottom:25px;
}
#login .form-line>p{
    float:left;
    margin:0;
    color:#999;
    width:64px;
    text-align:right;
    margin-right:42px;
    line-height:40px;
    height:40px;
}
#login .form-line>div{
    float:left;
    width:300px;
}
#login .form-control{
    /*300*40*/
    /*box-sizing,宽度，高度，边框，左内边距*/
    box-sizing:border-box;
    width:300px;
    height:40px;
    border:1px solid #ccc;
    padding-left:10px;
    /*取消轮廓*/
    outline:none;
}

#login .form-control:focus{
    border-color:#64a131;
    box-shadow:0px 0px 3px #64a131;
}
#login .form-line>div>p{
    float:right;
}
#login .form-line>div>p a{
    color:#999;
}
#login .form-line .isSaved{
    width:20px;
    height:20px;
    vertical-align:middle;
}
#login .form-line a.register{
    /*右浮动，宽度，高度，边框，倒角，文本:水平居中，行高，颜色，大小，取消下划线*/
    float:right;
    width:145px;
    height:40px;
    border:1px solid #64a131;
    border-radius:5px;
    text-align:center;
    line-height:40px;
    color:#64a131;
    font-size:18px;
    text-decoration:none;
}

#login .form-line .btnLogin{
    /*宽度，高度，取消边框，取消轮廓，背景颜色，边框倒角，文字颜色，文字大小，box-sizing*/
    width:145px;
    height:40px;
    border:none;
    outline:none;
    background:#64a131;
    border-radius:5px;
    color:#fff;
    font-size:18px;
    box-sizing:border-box;
}

猜你喜欢