<!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"> Account Login </ div>
<Div class = "content2-1-3"> mobile phone dynamic login code <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 = "mobile phone number / username / mail">
</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"> auto-login </ label> </ div> within seven days
<Div class = "content2-2-1-2"> Forgot your password? </ Div>
</div>
<div class="content2-3">
<a href="day5.html" >注册</a>
</div>
<div class="content2-4">
<Div class = "content2-4-1"> not have an account? </ Div>
<Div class = "content2-4-2"> Register </ div>
</div>
</div>
</div>
</div>
<div class="footer">
<Div> © 2016 US group net online shopping mei tuan.com Beijing ICP Certificate No. 070791 Beijing public security Reserved 11,010,502,025,545 electronic bulletin service rules </ 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-boron {
margin-top:10px;
position: relative;width: 200px;
}
.div-boron {
position: relative;width: 200px;
}
.iocn-user{
position: absolute;left: 0;z-index:5;
background-image: url (icon01.png); / * * introducing Photos /
background-repeat: no-repeat; / * set the picture does not repeat * /
background-position: 0px 0px; / * position of the picture shows * /
width: 20px; / * set the width of the display image * /
height: 20px; / * The picture shows the high * /
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;
}