一号店注册：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.clear{
content: '';
display: block;
clear: both;
}
body{
background: #fcfcfc;
}
.logo{
margin: 20px 0px 20px 150px;
float: left;
}
.login{
height: 32px;
line-height: 32px;
margin: 10px 150px 0px 0px;
float: right;
}
#help{
margin: 0px 0px 0px 20px;
float: right;
padding:0px 7px;
border: #dbdbdb 1px solid;
font-size: 13px;
}
#help img,#help span{
vertical-align: middle;
}
#welcome{
color: #b4b4b4;
font-weight: lighter;
}
#login{
text-decoration: none;
color: #6f69d9;
}
header{
height: 110px;
border-bottom: #b4b4b4 1px solid;
}
.bodyimg{
margin-top: 30px;
position: relative;
left: -70px;
}
.load{
margin-top: 80px;
float: right;
margin-right: 260px;
width: 330px;
}
.load span:nth-of-type(1){
font-size: 15px;
font-weight: bold;
color: #727272;
}
#load{
text-decoration: none;
float: right;
padding-top: 5px;
}
.load1{
width: 305px;
height: 60px;
margin: 5px 0px;
padding-left: 20px;
background: white;
position: relative;
border: #a7a7a7 1px solid;
}
.load1 input{
margin-left: 25px;
border: none;
line-height: 24px;
height: 24px;
outline: none;
width: 230px;
position: relative;
bottom: 7px;
font-size: 15px;
}
.load1 img{
margin-top: 17px;
}
.zidong input,.zidong a{
vertical-align: middle;
}
.zidong{
display: inline;
color: #a7a7a7;
}
.forget{
float: right;
}
.forget a{
color: #a7a7a7;
text-decoration: none;
}
input[value=登录]{
width: 327px;
height: 50px;
line-height: 50px;
margin-top: 15px;
background: #ff3f44;
border: none;
border-radius: 2px;
color: white;
font-size: 16px;
}
.more{
margin-top: 15px;
color: #72726f;
}
li{
list-style-type: none;
}
ul{
margin-top: 15px;
}
.fl li:nth-of-type(1){
width: 55px;
height: 34px;
background: url("../一号店/qqf.png") no-repeat;
background-size: contain;
float: left;
}
.fl li:nth-of-type(2){
width: 55px;
height: 34px;
background: url("../一号店/wbf.png") no-repeat;
background-size: contain;
float: left;
}
.fl li:nth-of-type(3){
width: 55px;
height: 34px;
background: url("../一号店/zhif.png") no-repeat;
background-size: contain;
float: left;
}
.fl li:nth-of-type(4){
width: 55px;
height: 34px;
background: url("../一号店/wxf.png") no-repeat;
background-size: contain;
float: left;
}
.fl li:nth-of-type(5){
background: url("../一号店/loadMore.png") right no-repeat;
height: 34px;
line-height: 34px;
background-size: 20px 14px;
padding-left: 10px;
width: 100px;
float: left;
}
.fl li:nth-of-type(5) a{
text-decoration: none;
color: #a7a7a7;
}
.fl li:nth-of-type(1):hover{
background: url("../一号店/qqt.png") no-repeat;
background-size: contain;
}
.fl li:nth-of-type(2):hover{
background: url("../一号店/wbt.png") no-repeat;
background-size: contain;
}
.fl li:nth-of-type(3):hover{
background: url("../一号店/zhit.png") no-repeat;
background-size: contain;
}
.fl li:nth-of-type(4):hover{
background: url("../一号店/wxt.png") no-repeat;
background-size: contain;
}
footer{
margin-top: 50px;
text-align: center;
}
.foot{
margin: 0px auto;
width: 300px;
padding-bottom: 25px;
}
.fr{
float: left;
}
.fr a{
text-decoration: none;
color: black;
}
.fr a:hover{
color: red;
}
</style>
</head>
<body>
<header>
<div class="logo"><a href="#"><img src="../一号店/loginlogo.jpg"></a></div>
<div class="login"><span id="welcome">您好，欢迎光临1号店！</span><a href="#" id="login">请登录</a><div id="help"><img src="../一号店/runbun.png"><span>帮助中心</span><img src="../一号店/turnb.png"></div></div>
</header>
<section>
<div class="loginbody">
<img src="../一号店/loadimg.jpg" class="bodyimg">
<div class="load">
<span>1号店用户登录</span>
<a href="#" id="load">注册账号</a>
<div class="clear"></div>
<form method="post" action="#">
<div class="load1"><img src="../一号店/userHead.png"><input type="text" placeholder="邮箱/手机/用户名"></div>
<div class="load1"><img src="../一号店/lock.png"><input type="password" placeholder="密码"></div>
<div class="zidong"><input type="checkbox" value="自动登录">自动登录</div>
<div class="forget"><a href="#">忘记密码？</a></div>
<div class="clear"></div>
<input type="submit" value="登录">
</form>
<div class="more">更多合作网站账号登录</div>
<ul class="fl">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">更多合作网站</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</section>
<footer>
<div class="foot">
<ul id="fr">
<li class="fr"><a href="#">沪ICP备13044278号</a> |</li>
<li class="fr"> 合字B1.B2-20130004 |</li>
<li class="fr"> <a href="#">营业执照</a></li>
</ul>
</div>
<div class="clear"></div>
<p>Copyright©1号店网上超市 2007-2016，All Rights Reserved</p>
</footer>
</body>
</html>