「web小白 」 诚心求各位大佬指点!!!
1.登录页面
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>魅力惠登录页面</title>
<link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="style/login.css">
<script type="text/javascript" href="js/jquery-1.12.4.js"></script>
<script type="text/javascript" href="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
.text-center{margin-top:-30px}
</style>
</head>
<body>
<div class="kj">
<div class="header">
<!-- 页头logo -->
<div></div>
</div>
<div class="content">
<div class="main">
<div class="register">
<h2>免费注册</h2>
<span>已注册？<a href="#">登录</a></span>
</div>
<div class="login_bar">
<ul>
<li><span>账户名:</span><input id="user_name" name="user_name" type="text" placeholder="已验证手机号/邮箱"></li>
<li><span>密码:</span><input id="password" type="password" name="password"></li>
</ul>
<div style="clear:both;"></div>
<div class="login_btn">
<a id="submitBtn" href="#">会员登录</a>
</div>
</div>
<div login_login>
<input type="checkbox" value="xddl">
<span class="dl">下次自动登录</span>
<a class="forget" href="#"><span>忘记密码</span></a>
</div>
<div class="partner">
<span class="lm">联名登录：</span>
<a href="#" class="weibo"></a>
<a href="#" class="zhifubao"></a>
</div>
<hr class="xian">
<div>
<div class="erweima">
<p>扫描二维码或发送短信
<br>
“MLH”到“12114”
<br>
下载APP尊享独家优惠
</p>
</div>
</div>
</div>
</div>
<!-- 页尾 -->
<div class="footer">
<ul>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class=""><a href="#"></a></li>
</ul>
</div>
</div class="footer_copyright">
<p class="text-center">COPYRIGHT©2016 杭州魅俪信息技术有限公司版权所有 浙ICP备16004860号-1</p>
</div>
</div>
</body>
</html>
- css
.kj{width:1000px;height:833px;margin: 0 auto;}
/*页头*/
.login_header{width:1000px;
height: 66px;
position: absolute;}
img.center-block.logo{margin-top:30px;}
.content{height: 650px;
background-image: url(../images/login/1.jpg);}
.main{float:right;width: 350px;height: 400px;margin-top:80px;margin-right: 170px;}
.register{width: 350px;height:50px;padding-bottom: 10px;font-family:"Microsoft Yahei";}
.register h2{font-size: 18px;
font-weight: bold;
float: left;
margin-left:40px;}
.register span{padding:0;margin:0px;letter-spacing: .5px;float: right;margin-left:200px;
margin-top: -28px;}
.register span a{color:red;}
.login_bar{width: 350px;font-family:"Microsoft Yahei";}
.login_bar li{list-style: none;margin:10px;}
.login_bar span{float: left;
width: 75px;
margin-left: -100px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-align: right;
white-space: nowrap;
display: inline;}
.login_bar input{
padding: 15px;
margin-left: -5px;
width: 300px;
padding-left:10px;
height: 30px;
border: 1px solid #999;
line-height: 28px;}
a#submitBtn{display: block;
background-color: #db2725;
width: 300px;
height: 35px;
font-weight: solid 1px #E0E0E0;
text-align: center;
line-height: 35px;
color: #FFF;
font-size: 14px;
margin-left: 46px;}
.login_login{width: 350px;height: 17px;float:left;margin-top:100px;
}
input[type="checkbox"]{display: block;margin-left: 45px;margin-top: 16px;width: 12px;height: 12px;
float: left;}
span[class="dl"]{float: left;margin-left: 9px;margin-top: 12px;}
a[class="forget"]{float: left;margin-left: 140px;margin-top: 12px;color:gray;}
div[class="partner"]{width: 350px;height:17px;}
span[class="lm"]{float:left;margin-left: -38px;margin-top:12px; }
.weibo{float:left;margin-top:10px;padding-left: 15px;}
.zhifubao{float:left;margin-top:10px;padding-left: 30px;}
.xian{display: block;width: 380px;float: left;margin-top: 20px;margin-left: -70px;}
.erweima{float: left;margin-left: 90px;margin-top: 10px;}
.erweima p{float: right;margin-top:10px;padding: 8px; }
/*页脚*/
.login12{float: left;display: block;margin-left:15px;border-right: 1px #272727 solid;}
.footer ul li{list-style: none;float: left;display: block;margin-top: 25px;}
登录页面
2.注册页面
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>魅力惠注册页面</title>
<link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="style/register.css">
<script type="text/javascript" href="js/jquery-1.12.4.js"></script>
<script type="text/javascript" href="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
.yzm{border:1px solid #999; width: 145px;height: 32px;margin-left: 10px;}
.dj{display:block;margin-top: 15px;margin-left: 45px;}
</style>
</head>
<body>
<div class="kj">
<div class="header">
<!-- 页头logo -->
<div></div>
</div>
<div class="content">
<div class="main">
<div class="register">
<h2>免费注册</h2>
<span>已注册？<a href="#">登录</a></span>
</div>
<div class="xyh">新客专享 820元现金券礼包</div>
<div class="login_bar">
<ul>
<li><span>账户名:</span><input id="user_name" name="user_name" type="text" placeholder="手机号/邮箱"></li>
<li><span>密码:</span><input id="password" type="password" name="password" placeholder="请输入6-20个字符"></li>
<li><span>确认密码:</span><input id="user_name" name="user_name" type="text"></li>
<li><span>验证码:</span><input type="text" class="dx"></li>
<li><span>短信验证码:</span><input type="text" class="dx"></li>
<button type="submit" class="btn btn-default yzm">获取验证码</button>
</ul>
<div style="clear:both;"></div>
<div class="login_btn">
<a id="submitBtn" href="#">立即注册</a>
</div>
</div>
<div login_login>
<span class="dj">点击立即注册即表示同意魅力惠<a href="#">使用条款</a></span>
<input type="checkbox" value="xddl">
<span class="dl">您将收到魅力惠每日最新上线邮件</span>
</div>
<hr class="xian">
<div>
<div class="erweima">
<p><span class="fg">扫描二维码或发送短信</span>
<br>
<span class="fg">    “MLH”到“12114”</span>
<br>
<span class="fg">下载APP尊享独家优惠</span>
</p>
</div>
</div>
</div>
</div>
<!-- 页尾 -->
<div class="footer">
<ul>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class="login12"><a href="#"></a></li>
<li class=""><a href="#"></a></li>
</ul>
</div>
</div class="footer_copyright">
<p class="text-center">COPYRIGHT©2016 杭州魅俪信息技术有限公司版权所有 浙ICP备16004860号-1</p>
</div>
</div>
</body>
</html>
- css
.kj{width:1000px;height:833px;margin: 0 auto;}
.login_header{width:1000px;
height: 66px;
position: absolute;}
img.center-block.logo{margin-top:30px;}
.content{height: 650px;
background-image: url(../images/login/1.jpg);}
.main{float:right;width: 350px;height: 485px;margin-top:80px;margin-right: 170px;}
.register{width: 350px;height:50px;padding-bottom: 10px;font-family:"Microsoft Yahei";}
.register h2{font-size: 18px;
font-weight: bold;
float: left;
margin-left:40px;}
.register span{padding:0;margin:0px;letter-spacing: .5px;float: right;margin-left:200px;
margin-top: -28px;}
.register span a{color:red;}
.xyh{margin-left: 42px;color: red;}
.login_bar{width: 400px;font-family:"Microsoft Yahei";}
.login_bar li{list-style: none;margin:10px;}
.login_bar span{float: left;
width: 75px;
margin-left: -100px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-align: right;
white-space: nowrap;
display: inline;}
.login_bar input{
padding: 15px;
margin-left: -5px;
width: 300px;
padding-left:10px;
height: 30px;
border: 1px solid #999;
line-height: 28px;}
.login_bar .dx{float:left;width: 145px;}
#submitBtn{display: block;
background-color: #db2725;
width: 300px;
height: 35px;
font-weight: solid 1px #E0E0E0;
text-align: center;
line-height: 35px;
color: #FFF;
font-size: 14px;
margin-left: 46px;}
input[type="checkbox"]{display: block;margin-left: 45px;margin-top: 11px;width: 12px;height: 12px;
float: left;}
.dl{float: left;margin-left: 9px;margin-top: 8px;}
.xian{display: block;color:black;width: 400px;float: left;margin-top: 20px;margin-left: -50px;}
.erweima{float: left;margin-left: 90px;margin-top: 10px;}
.erweima p{float: right;margin-top:18px;padding: 10px; }
.fg{display: block;margin:-10px 0;}
.login12{float: left;display: block;margin-left:15px;border-right: 1px #272727 solid;}
.footer ul li{list-style: none;float: left;display: block;margin-top: 50px;}
.footer_copyright{float: left;margin-left: 400px;margin-top:0px; }
注册页面
未完待续...
