<!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="#">会员注册></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;
}
