html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="box">
<img src="./img/2.png" class="img1">
<div class="dec">
<span class="z1">会员登录</span>
<span class="z2">立即注册</span>
<span class="z3">，享积分换礼、返现等专属优惠！</span>
</div>
<div class="line"></div>
<div class="radio-group">
<input type="radio" name="c" id="a">
<label for="a" class="label1">普通登录</label>
<input type="radio" name="c" id="b">
<label for="b" class="label2">手机动态密码登录</label>
</div>
<input type="text" class="user" placeholder="请输入注册手机/注册邮箱">
<input type="text" class="pwd" placeholder="请输入密码">
<div class="yzm">
<input type="text" placeholder="请输入验证码" class="yzm-input">
<div class="yzm-img">
<img src="./img/5.png" alt="">
</div>
<span>换一张</span>
</div>
<div class="jizhu">
<input type="checkbox" id="e">
<label for="e">30天自动登录</label>
<span>忘记密码</span>
</div>
<div class="login">登 录</div>
<div class="line2"></div>
<div class="dec2"><div class="dec2" >您也可以用合作网站的帐号登录去i旅行网</div>
<div class="tu">
<img src="./6.png" alt="">
</div>
</div>
</body>
</html>
css页面
*{margin:0;padding:0;}
html,body{font-size: 12px;font-family: '微软雅黑';height: 100%;}
body{
background:url(../img/1.jpg) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.box{
width: 500px;
height: 650px;
background-color: #eee;
margin:10px auto;
position: relative;
overflow: hidden;
}
.img1{
position: absolute;
right: 0;
top:0;
}
.dec{
width: 397px;
height: 23px;
margin:77px auto 9px;
}
.z1{
font-size: 23px;
color:#131313;
}
/* hack css的兼容 */
/* dec使用了margin-top 父级没有border padding overflow */
/* 就会产生子元素的margin-top影响了父元素 */
.z2{
margin-left:40px;
color:#1a479c;
}
.z3{
color:#131313;
}
.line {
width: 450px;
height: 2px;
margin:0 auto;
background-color: #ccc;;
}
.radio-group{
margin-top:39px;
}
#a{
width: 16px;
height: 16px;
color:#000;
vertical-align: text-bottom;
margin-left:126px;
}
#b{
width: 16px;
height: 16px;
color:#000;
vertical-align: text-bottom;
margin-left:56px;
}
.label1{
font-size:16px;
color:#000;
cursor: pointer;
margin-left:10px;
}
.label2{
font-size:12px;
color:#414141;
cursor: pointer;
margin-left:9px;
}
.user{
background: url(../img/3.png) 16px center no-repeat;
width: 380px;
height: 40px;
outline: none;
border: solid 1px #aaaaaa;
background-color: #fff;
padding-left:69px;
margin:35px auto 29px;
display: block;
box-sizing: border-box;
}
.pwd{
background: url(../img/4.png) 16px center no-repeat;
width: 380px;
height: 40px;
outline: none;
border: solid 1px #aaaaaa;
background-color: #fff;
padding-left:69px;
margin:0 auto 29px;
display: block;
box-sizing: border-box;
}
.yzm {
display: flex;
}
.yzm-input{
width: 180px;
height: 40px;
border:1px solid #aaa;
outline: none;
background: #fff;
padding-left:20px;
box-sizing: border-box;
margin-left:60px;
}
.yzm-img{
width: 150px;
height: 40px;
border: solid 1px #aaaaaa;
margin-left:50px;
}
.yzm-img img{
width: 100%;
height: 100%;
display: block;
}
.yzm span{
color:#1a479c;
font-size: 14px;
line-height: 40px;
margin-left:9px;
}
.jizhu{margin-top: 31px;
}
#e{width: 14px;
height: 10px;
vertical-align: text-top;
margin-left: 61px;
}
.jizhu label{
font-size: 14px;
color: #131313;
margin-left: 11px;
}
.jizhu span{color: #1a479c;
font-size: 14px;
margin-left: 188px;}
.login{width:300px;
height: 45px;
background-color: #f19149;
margin: 25px auto 30px;
box-sizing: border-box;
border: 2px solid #f5b381;
font-size: 24px;
color: #fff;
text-align: center;}
.login:hover{background-color: #eb6100;
cursor: pointer;}
.line2{width: 100%;
height: 1px;
background-color: #e5e5e5;}
.dec2{font-family: simsun;
font-size: 14px;
color: #1a479c;
margin-top: 13px;
margin-left: 35px;}
.tu{margin-top: 26px;
margin-left: 58px;}
