京东登录注册页面的简单实现——（仿）
2019-02-13 19:17
211 查看
京东登录界面的简单实现——（仿）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东登录页</title>
<!--<link rel="stylesheet" href="css/login.css"/>-->
<style>
header,section,article,figure{
display: block;
}
*,html,body{
padding: 0;
margin: 0;
}
body,p,ul,li,span,i,strong,input,textarea{
font-size: 14px;
font-family: "微软雅黑";
font-style: normal;
padding: 0;
margin: 0;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
font-size: 14px;
}
a{
text-decoration: none;
color: #000;
}
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
header{
width: 980px;
margin: 0 auto ;
/*border: 1px #off solid;*/
height: 108px;
position: relative;
}
.logo{padding-top:15px ;}
.logo img{margin-right: 10px;}
header > article a{
position: absolute;
right: 0;
top:50px;
font-size: 12px;
}
header a img{ vertical-align:middle; padding-right: 5px;}
header a:hover{
text-decoration:
underline; color: #f00;
}
header article a{
font-family: "宋体";
font-size: 12px;
color: #999;
}
mark{
width:100%;
height: 37px;
background: #fff8f0;
text-align: center;
line-height: 37px;
font-family: "宋体";
font-size: 12px;
color: #999;
display: block;
}
.content{
position: relative;
background:#dd2e12;/*中间大背景*/
height: 477px;
}
.wrap{/*中间图片背景*/
width: 378px;
margin: 0 auto;
background:url(img/5b03c9d2Na9f7af36.jpg)no-repeat left center;
height: 477px;
padding-left: 622px;
}
.formgorup{ /*右侧白背景*/
position: relative;
overflow: visible;
bottom: 465px;
left: 1000px;
background: #fff;
width: 346px;
height: 400px;
}
.formgorup mark{
height: 38px;
text-align: center;
display: block;
line-height: 35px;
background: #fff8f0;
font-family: "宋体";
font-size: 12px;
}
.formgorup mark img{
vertical-align: middle;
padding-right: 5px;
}
section mark{
background: #DD2E12;
font-family: "宋体";
font-size: 12px;
color: #999;
}
form img{
align-self: auto;
width: 38.67px;
height: 38px;
}
#bz{
width: 173px;
height: 56px;
float: left;
border-bottom:#f4f4f4 solid 1px ;
}
#bz a:hover{
font-family:"微软雅黑";
font-weight: bolder;
color:#E4393C;
}
p{
/*width: 173px;
height: 18px;*/
margin-top: 16px;
font-size: 18px;
}
.o{
color: #696969;
}
.q{
text-align: center;
border-right: #f4f4f4 solid 1px;
}
#by{
width: 173px;
height: 56px;
float: left;
text-align: center;
border-bottom:#f4f4f4 solid 1px ;
}
#by a:hover{
font-family:"微软雅黑";
font-weight: bolder;
color:#E4393C;
}
.mid{
position:absolute;
top: 94px;
width: 304px;
height: 255px;
margin-left: 20px;
}
.midtop{
position: absolute;
top:33px;
width: 302px;
height: 38px;
border: #999999 solid 1px;
}
.Uphoto img{
border-right: #999999 solid 1px;
}
.longname input{
position: absolute;
left:50px;
top:0px;
width: 250px;
height: 38.3px;
border:none;
font-family:"宋体";
font-size: 16px;
color: gray;
}
.midunder{
position: absolute;
top:92px;
width: 302px;
height: 38px;
border: #999999 solid 1px;
}
.Pphoto img{
border-right: #999999 solid 1px;
}
.password input{
position: absolute;
left: 50px;
top: 0.5px;
width: 250px;
height: 37px;
border: none;
font-family: "宋体";
font-size: 16px;
color: gray;
}
.midsmall{
position: absolute;
top:151px;
width: 302px;
height: 18px;
color: dimgrey;
text-align: right;
font-family: "宋体";
}
.midsmall p{
position: absolute;
left:250px;
bottom: 2px;
color: dimgrey;
text-align: right;
font-size: 12px;
font-family: "宋体";
}
.midsmall a:hover{
color:#dd2e12;
text-decoration: underline;
}
/*.midbtn{
position: absolute;
top:180px;
width: 302px;
height: 36px;
background: #DD2E12;
}*/
.sf{
position: absolute;
top:349px;
background: #fcfcfc;
width: 346px;
height: 51px;
border-top:#f4f4f4 solid 1px ;
}
.foot{
width: 302px;
height: 51px;
margin:0 auto;
}
.qq_icon{
position: absolute;
left: 20px;
top:15px;
}
.qq_icon img{
width: 19px;
height: 18px;
}
.qq p{
width:35px;
margin-left: 20px;
font-family: "微软雅黑";
font-size:11px;
color:dimgrey;
border-right: darkgray solid 1px;
}
.qq a:hover{
color:#dd2e12;
text-decoration: underline;
}
.wechat img{
position: absolute;
left: 90px;
top:15px;
width: 19px;
height: 18px;
}
.wx p{
position: absolute;
left: 115px;
bottom:20px;
color:dimgrey;
font-family: "宋体";
font-size:11px;
color: dimgrey;
}
.wx a:hover{
color:#dd2e12;
text-decoration: underline;
}
.zc_p img{
position: absolute;
right: 80px;
top:18px;
width: 16px;
height: 16px;
}
.zc p{
position: absolute;
right:22px ;
bottom:16px;
font-size:14px;
color:#dd2e12;
font-family: "宋体";
}
.zc a:hover{
color:#dd2e12;
text-decoration: underline;
}
.midbtn input{
width: 304px;
height: 36px;
position: absolute;
left:0px;
top: 190px;
background:#DD2E12;
border: #DD2E12 solid 1px;
font-size: 22px;
font-family: "微软雅黑";
color: white;
text-align: center;
}
footer{
position: absolute;
top: 625px;
left:300px;
width: 1000px;
height:80px;
}
nav{
position: absolute;
top:10px;
left:30px;
height: 20px;
width:900px;
}
.low{
position: absolute;
top:45px;
left:350px;
width: 350px;
height: 20px;
}
.low p{
position: absolute;
bottom:8px;
left: 10px;
font-size:10px;
font-family: "微软雅黑";
text-align: center;
color: grey;
}
.gywm{
float: left;
color: grey;
font-size: 12px;
padding-left: 15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.gywm a:hover{
color:#dd2e12;
text-decoration: underline;
}
.gywm a{
color: grey;
}
.lxwm{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.lxwm a:hover{
color:#dd2e12;
text-decoration: underline;
}
.lxwm a{
color: grey;
}
.rczp{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.rczp a:hover{
color:#dd2e12;
text-decoration: underline;
}
.rczp a{
color: grey;
}
.sjrz{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.sjrz a:hover{
color:#dd2e12;
text-decoration: underline;
}
.sjrz a{
color: grey;
}
.ggfw{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.ggfw a:hover{
color:#dd2e12;
text-decoration: underline;
}
.ggfw a{
color: grey;
}
.sjjd{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.sjjd a:hover{
color:#dd2e12;
text-decoration: underline;
}
.sjjd a{
color: grey;
}
.yqlj{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.yqlj a:hover{
color:#dd2e12;
text-decoration: underline;
}
.yqlj a{
color: grey;
}
.xslm{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.xslm a:hover{
color:#dd2e12;
text-decoration: underline;
}
.xslm a{
color: grey;
}
.jdsq{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid
20000
1px;
}
.jdsq a:hover{
color:#dd2e12;
text-decoration: underline;
}
.jdsq a{
color: grey;
}
.jdgy{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.jdgy a:hover{
color:#dd2e12;
text-decoration: underline;
}
.jdgy a{
color: grey;
}
.yyz{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
}
.yyz a:hover{
color:#dd2e12;
text-decoration: underline;
}
.yyz a{
color: grey;
}
</style>
</head>
<body>
<header>
<article>
<figure class="logo">
<img src="img/logo-201305-b.png" />
<img src="img/l-icon.png" alt=""/>
</figure>
<a href="#"><img src="img/q-icon.png" alt="">登录页面，调查问卷</a>
</article>
</header>
<mark>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="#">《京东隐私政策》</a>，将更有利于保护您的个人隐私。</mark>
<section class="content">
<article class="wrap"></article>
<article class="formgorup">
<mark><img src="img/icon-tips.png" alt="" />京东不会以任何理由要求您转账汇款，谨防诈骗。</mark>
<form action="index.html" method="" id="reg">
<div id="bz"><p class="q o"><a href="#">扫码登录</a></p></div>
<div id="by"><p class="o"><a href="#">账户登录</a></p></div>
<!--账号登录部分-->
<div class="mid">
<div class="midtop">
<span class="Uphoto"><img src="img/users.png"/></span>
<span class="longname">
<input type="text" placeholder="邮箱/用户名/已验证手机" required=""/>
</span>
</div>
<div class="midunder">
<span class="Pphoto"><img src="img/mima.png"/></span>
<span class="password">
<input type="password" placeholder="密码" required=""/>
</span>
</div>
<div class="midsmall"><p><a href="#">忘记密码</a></p></div>
<div class="midbtn"><a href="表单/shopping.html" ><input type="button" value="登   录" form="reg"/></a></div>
</div>
<div class="sf">
<div class="foot">
<span class="qq_icon"><a href="#"><img src="img/q_icon.png"/></a></span>
<span class="qq"><p><a href="#">QQ</a></p></span>
<span class="wechat"><img src="img/w_icon.png"/></span>
<span class="wx"><p><a href="#">微信</a></p></span>
<span class="zc_p"><a href="#"><img src="img/jiantou.png"/></a></span>
<span class="zc"><p><a href="register.html">立即注册</a></p></span>
</div>
</div>
</form>
</article>
</section>
<footer>
<nav>
<ul>
<li class="gywm"><a href="#">关于我们</a></li>
<li class="lxwm"><a href="#">联系我们</a></li>
<li class="rczp"><a href="#">人才招聘</a></li>
<li class="sjrz"><a href="#">商家入驻</a></li>
<li class="ggfw"><a href="#">广告服务</a></li>
<li class="sjjd"><a href="#">手机京东</a></li>
<li class="yqlj"><a href="#">友情链接</a></li>
<li class="xslm"><a href="#">销售联盟</a></li>
<li class="jdsq"><a href="#">京东社区</a></li>
<li class="jdgy"><a href="#">京东公益</a></li>
<li class="yyz"><a href="#">English Site</a></li>
</ul>
</nav>
<div class="low"><p>Copyright © 2004-2018 京东JD.com 版权所有</p></div>
</footer>
</body>
</html>
京东注册页面的简单实现——（仿）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东注册页</title>
<!--<link rel="stylesheet" href="css/register.css"/>-->
<style>
header,section,article,figure{
display: block;
}
*,html,body{
padding: 0;
margin: 0;
}
body,p,ul,li,span,i,strong,input,textarea{
font-size: 14px;
font-family: "微软雅黑";
font-style: normal;
padding: 0;
margin: 0;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
font-size: 14px;
}
a{
text-decoration: none;
color: #000;
}
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
header{
width: 1300px;
height: 70px;
margin: 0 auto;
position: relative;
}
article{
float: left;
width: 1200px;
height: 50px;
}
.dl{
position: absolute;
right: 50px;
top: 30px;
width: 150px;
height: 10px;
float: left;
}
.dh{
position: absolute;
left: 50px;
width: 300px;
height: 100px;
float: left;
}
.dh .jdtp{
float: left;
}
.dh .hyzc{
margin-top:26px;
width: 110px;
height: 34px;
float: left;
}
.dl p{
margin-top: 15px;
color: #696969;
display: inline;
}
.dl a{
margin-top: 15px;
color: #DD2E12;
display: inline;
}
.dl a:hover{
color: #FF0000;
text-decoration: underline;
}
section{
position: relative;
width:100%;
height:800px;
box-shadow:inset 0 0 0 2px #A9A9A9; /*水平线阴影*/
border-top: #f4f4f4 solid 1px;
}
.bd{
width:1200px;
height:600px;
margin-left:200px;
margin-right: 200px;
margin-top:100px;
border-bottom: #999999 solid 1px;
}
#zhuce{
width:400px;
height: 420px;
margin: 0 auto;
}
.num{
width: 380;
height: 54px;
margin-left: 10px;
margin-right: 10px;
}
.phone{
width:380px;
height: 55px;
margin:0 auto;
margin-top: 45px;
border: #999999 solid 1px;
}
.check{
width:380px;
height: 55px;
margin:0 auto;
margin-top: 30px;
border:darkgray solid 1px;
}
.next {
width:380px;
height: 55px;
margin:0 auto;
margin-top: 50px;
border: #999999 solid 1px;
}
.db{
width:380px;
height: 40px;
margin:0 auto;
margin-top: 20px;
}
.gs_icon img{
float: left;
width:35px;
height:35px;
margin-top: 3px;
}
.gs p{
float: left;
width:100px;
margin-top:12px;
margin-left:5px;
font-family: "微软雅黑";
font-size:12px;
color:dimgrey;
}
.gs a:hover{
color:#dd2e12;
}
.gj_icon img{
margin-top: 4px;
float: right;
width: 33px;
height:33px;
margin-right: 5px;
}
.gj p{
margin-top: 12px;
margin-right: 5px;
float: right;
color:dimgrey;
font-family:"微软雅黑";
font-size:12px;
color: dimgrey;
}
.gj a:hover{
color:#dd2e12;
}
.sz{
width: 380px;
height: 27px;
color: darkgray;
}
.sz p{
margin-bottom: 10px;
/*left:300px;
top:250px;
position: absolute;*/
font-size:24px;
color: darkgrey;
display: inline;
}
.one{
margin-left: 25px;
width: 26px;
height: 26px;
-webkit-border-radius: 50%; /*圆形边框定义*/
-moz-border-radius:50%;
border-radius:50%;
color: white;
background: limegreen;
}
.two{
width: 26px;
height: 26px;
-webkit-border-radius: 50%;
-moz-border-radius:50%;
border-radius:50%;
color: white;
background: limegreen;
}
.three{
width: 26px;
height: 26px;
-webkit-border-radius: 50%;
-moz-border-radius:50%;
border-radius:50%;
color: white;
background: limegreen;
}
.nr{
width:450px;
height: 27px;
margin-top: 10px;
color: darkgray;
}
.yzsjh{
margin-left: 10px;
width: 125px;
height: 26px;
margin-right:50px;
}
.yzsjh p{
text-align: left;
display: inline;
}
.tzxx{
height: 26px;
width: 150px;
margin-right:50px;
}
.tzxx p{
text-align: center;
display: inline;
}
.zccg{
height: 26px;
width:100px;
}
.zccg p{
text-align: right;
display: inline;
}
.zg{
padding-top: 15px;
float: left;
text-align:center;
font-family: "微软雅黑";
font-size: 14px;
color:#696969;
margin-right:10px;
margin-left: 10px;
margin-top: 3px;
}
.phone input{
padding-left: 20px;
width:250px;
height: 55px;
float: left;
font-family: "微软雅黑";
font-size:14px;
color: gray;
display: inline;
border:0;
border-left:#A9A9A9 solid 1px;
}
.check input{
width:380px;
height:55px;
border: 0;
background:white;
}
.next input{
width:380px;
height:55px;
border: 0;
color: white;
background:#e2231a;
}
footer{
position: relative;
top:195px;
right:280px;
width: 1000px;
height: 100px;
}
nav{
position: absolute;
top: 20px;
left:50px;
height: 20px;
width:900px;
}
.low{
position: absolute;
top:45px;
left:350px;
width: 350px;
height: 20px;
}
.low p{
position: absolute;
bottom:8px;
left: 10px;
font-size:10px;
font-family: "微软雅黑";
text-align: center;
color: grey;
}
.gywm{
float: left;
color: grey;
font-size: 12px;
padding-left: 15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.gywm a:hover{
color:#dd2e12;
text-decoration: underline;
}
.gywm a{
color: grey;
}
.lxwm{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.lxwm a:hover{
color:#dd2e12;
text-decoration: underline;
}
.lxwm a{
color: grey;
}
.rczp{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.rczp a:hover{
color:#dd2e12;
text-decoration: underline;
}
.rczp a{
color: grey;
}
.sjrz{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.sjrz a:hover{
color:#dd2e12;
text-decoration: underline;
}
.sjrz a{
color: grey;
}
.ggfw{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.ggfw a:hover{
color:#dd2e12;
text-decoration: underline;
}
.ggfw a{
color: grey;
}
.sjjd{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.sjjd a:hover{
color:#dd2e12;
text-decoration: underline;
}
.sjjd a{
color: grey;
}
.yqlj{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.yqlj a:hover{
color:#dd2e12;
text-decoration: underline;
}
.yqlj a{
color: grey;
}
.xslm{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.xslm a:hover{
color:#dd2e12;
text-decoration: underline;
}
.xslm a{
color: grey;
}
.jdsq{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.jdsq a:hover{
color:#dd2e12;
text-decoration: underline;
}
.jdsq a{
color: grey;
}
.jdgy{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
padding-right:14px;
border-right:#999999 solid 1px;
}
.jdgy a:hover{
color:#dd2e12;
text-decoration: underline;
}
.jdgy a{
color: grey;
}
.yyz{
float: left;
color: grey;
font-size: 12px;
padding-left:15px;
}
.yyz a:hover{
color:#dd2e12;
text-decoration: underline;
}
.yyz a{
color: grey;
}
</style>
</head>
<body>
<header>
<article>
<div class="dh">
<img src="img/logo-201305-b.png"/>
<img src="img/hyzc.png" class="hyzc"/>
</div>
<div class="dl">
<p>已有账号？</p><a href="login.html">请登录</a>
</div>
</article>
</header>
<section>
<article class="bd">
<form action="login.html" method="" id="zhuce">
<div class="num">
<div class="sz">
<span class="one">1</span><p>…………………</p>>
<span class="two">2</span><p>…………………</p>>
<span class="three">3</span>
</div>
<div class="nr">
<span class="yzsjh"><p>验证手机号</p></span>
<span class="tzxx"><p>填写账号信息</p></span>
<span class="zccg"><p>注册成功</p></span>
</div>
</div>
<div class="phone">
<p class="zg">中国0086 v</p>
<input placeholder="建议使用常用手机号" ></input>
</div>
<div class="check">
<input type="button" value="点击按钮进行验证"/>
</div>
<div class="next">
<input type="button" value="下一步"/>
</div>
<div class="db">
<span class="gs_icon"><a href="#"><img src="img/gs-icon.png" /></a></span>
<span class="gs"><p><a href="#">个人用户注册</a></p></span>
<div class="db">
<span class="gj"><p><a href="#">国际站注册</a></p></span>
<span class="gj_icon"><a href="#"><img src="img/gj-icon.png"/></a></span>
</div>
</div>
<footer>
<nav>
<ul>
<li class="gywm"><a href="#">关于我们</a></li>
<li class="lxwm"><a href="#">联系我们</a></li>
<li class="rczp"><a href="#">人才招聘</a></li>
<li class="sjrz"><a href="#">商家入驻</a></li>
<li class="ggfw"><a href="#">广告服务</a></li>
<li class="sjjd"><a href="#">手机京东</a></li>
<li class="yqlj"><a href="#">友情链接</a></li>
<li class="xslm"><a href="#">销售联盟</a></li>
<li class="jdsq"><a href="#">京东社区</a></li>
<li class="jdgy"><a href="#">京东公益</a></li>
<li class="yyz"><a href="#">English Site</a></li>
</ul>
</nav>
<div class="low"><p>Copyright © 2004-2018 京东JD.com 版权所有</p></div>
</footer>
</form>
</article>
</section>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Java 使用jsp页面利用JDBC访问MySQL数据库 简单实现用户登录注册
- JSP作业3 - 使用JSP实现简单的用户登录注册页面
- JavaScript 注册登录页面的简单实现
- Django登录、注册和修改密码简单页面实现
- shell 实现简单的登录和注册功能
- Android笔记-4-实现登陆页面并跳转和简单的注册页面
- node.js实现用户登录注册简单示例
- Storyboard学习五(简单注册页面实现)
- python实现的简单用户注册登录系统
- 简单实现android炫酷注册页面动画
- webpy实现简单的登录注册和对应验证
- SpringMVC+mybaits+mysql实现简单的登录注册
- 用flask的扩展实现的简单的页面登录
- Android——XUtils3实现登录和注册页面校验
- android SQLite实现本地登录注册功能,SQLite简单应用（android studio）
- nodejs+express+mongodb简单实现注册登录写发博客
- 例子：实现最新版本Node.js中Express+mongodb的登录注册页面
- （安卓APP）关于使用偏好设置储存数据，首次登录应用到新手指导页，再次登录直接到主页面简单的相关实现代码
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- MySql实现简单的注册登录(易语言)