<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="indexl4.css">
</head>
<body>
<div class="box">
<div class="header">
<img src="logo.png" alt="">
</div>
<div class="content">
<div class="content1"> <img src="login.png" alt=""></div>
<div class="content2">
<div class="content2-1">
<div class="content2-1-1">
<div class="content2-1-2">账号登录</div>
<div class="content2-1-3">手机动态码登录 <img src="phone.png" alt=""></div>
</div>
<div class="div-bor">
<i class="icon-user"></i>
<input type="text" class="user" style="width:300px;height:34px;" placeholder="手机号/用户名/邮箱">
</div>
<div class="div-bor">
<i class="icon-user"></i>
<input type="text" class="user" style="width:300px;height:34px;" placeholder="密码">
</div>
<div class="content2-2-1">
<div class="content2-2-1-1"><label><input type="checkbox">七日内自动登录</label></div>
<div class="content2-2-1-2">忘记密码？</div>
</div>
<div class="content2-3">
<a href="day5.html" >注册</a>
</div>
<div class="content2-4">
<div class="content2-4-1">还没有账号？</div>
<div class="content2-4-2">免费注册</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div>©2016 美团网网购 mei tuan.com 京ICP证070791号 京公网安备11010502025545号 电子公告服务规则</div>
</div>
</div>
</body>
</html>
...css
*{
margin: 0px;
padding: 0px;
}
.box{
width: 1902px;
height: 950px;
/* border: 2px solid black; */
}
.header{
width: 250px;
margin-left:470px;
margin-top: 40px;
/* border: 2px solid black; */
}
.content{
display:flex;
}
.content1{
width: 500px;
height: 400px;
margin-left: 460px;
margin-top: 30px;
/* border: 2px solid black; */
}
.content2{
width: 500px;
height: 400px;
margin-top: 30px;
/* border: 2px solid black; */
}
.content2-1{
width: 350px;
height: 270px;
margin-left: 70px;
margin-top: 52px;
/* border: 2px solid rgb(233, 22, 22); */
}
.content2-1-1{
display: flex;
/* border: 2px solid rgb(233, 22, 22); */
}
.content2-1-2{
padding-top: 10px;
}
.content2-1-3{
margin-left: 135px;
padding-top: 5px;
}
.div-bor{
margin-top:10px;
position: relative;width: 200px;
}
.div-bor{
position: relative;width: 200px;
}
.iocn-user{
position: absolute;left: 0;z-index:5;
background-image: url(icon01.png); /*引入图片图片*/
background-repeat: no-repeat; /*设置图片不重复*/
background-position: 0px 0px; /*图片显示的位置*/
width: 20px; /*设置图片显示的宽*/
height: 20px; /*图片显示的高*/
top: 4px;left: 5px;
}
.user{
padding: 5px 5px 5px 22px;
}
.content2-2-1{
display: flex;
}
.content2-2-1-2{
margin-left: 135px;
color: #ec454a;
}
.content2-2-1{
margin-top: 5px;
}
.content2-3{
text-align: center;
width: 327px;
height: 35px;
padding-top: 5px;
margin-top: 10px;
background-color: #e42d32;
/* border: 2px solid red; */
}
.content2-3 a{
color: white;
text-decoration: none;
}
.content2-3 a:hover{
color: yellow;
}
.content2-4{
margin-top: 10px;
display: flex;
}
.content2-4-2{
color: #ec454a;
}
.content2-4-1{
color: #666666;
}
.footer{
text-align: center;
margin-top: 50px;
/* border: 2px solid rgb(233, 22, 22); */
color: #cccccc;
}