<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美樂樂_login</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.line1{
height: 90px;
width: 100%;
}
.line2{
height: 500px;
width: 1000px;
border: #A9A9A9 solid 1px;
margin: auto;
}
.picture{
height: 500px;
width: 498px;
float: left;
}
.login{
height: 500px;
width: 498px;
float: right;
}
.input_word{
height: 500px;
width: 100px;
float: left;
text-align: right;
margin-top: 120px;
}
.input_square {
height: 500px;
width: 200px;
float: left;
text-align: left;
}
.free_reg{
height: 30px;
width: 180px;
background-color: green;
float: right;
margin-top: 460px;
text-align: center;
color: #FFFFFF;
}
img{
margin-left: 140px;
}
#redbag{
margin-left: 50px;
margin-top: 100px;
}
p{
font-size: medium;
margin-top: 30px;
color: grey;
font-family: 新宋體;
}
input{
font-size: medium;
margin-top: 30px;
color: grey;
font-family: 新宋體;
}
#square_input{
margin-top: 145px;
}
span{
font-size: small;
}
.agree{
width: 180px;
height: 20px;
border: red solid 1px;
background-color:red;
color: #FFFFFF;
padding-top: 5px;
margin-right: 80px;
margin-top: 15px;
text-align: center;
}
a{
text-decoration: none;
color: #FFFFFF;
}
#forget_password{
color: #677ff7;
}
</style>
</head>
<div class="line1">
<img src="logo.png">
</div>
<div class="line2">
<div class="picture">
<img id="redbag" src="redbag.jpg">
</div>
<div class="login">
<div class="input_word">
<p>用戶名:</p>
<p>登錄密碼:</p>
<p>驗證碼:</p>
</div>
<div class="input_square">
<input id="square_input" type="text">
<input type="password">
<input type="number">
<p><input type="checkbox">自動登錄 <a id="forget_password" href="http://www.baidu.com"> 忘記密碼?</a></p>
<div class="agree">
<span><a href="http://www.baidu.com">登錄</span>
</div>
</div>
<div class="free_reg">
<span><a href="reg.html">免費註冊>></span>
</div>
</div>
</div>
<body>
</body>
</html>![QQ截圖20180927103444.png]( "1538015715423316.png")
