html页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东-欢迎登录</title>
<!--
设置网页图标
rel:icon(设置图标)
type:文件类型 image/图片类型(ico,png)
-->
<link rel="icon" type="image/x-icon" href="img/icon.ico"/>
<link rel="stylesheet" type="text/css" href="css/jingdong_login.css"/>
</head>
<body>
<!--=========1.顶部=========-->
<div id="header">
<div class="h-top">
<!--图标部分-->
<div class="icon">
<a href="https://www.jd.com/"><img src="img/logo.png"/></a>
<img src="img/l-icon.png"/>
</div>
<!--问卷-->
<a class="a2" target="_blank" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面，调查问卷</a>
</div>
<div class="h-bottom">
<div>
<!--法律说明-->
<img src="img/warning.png"/>
<p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
</div>
</div>
<!--=========2.中间内容========-->
<div id="content">
<div class="centent-1">
<div class="input_div">
<div class="info_top">
<div class="top-top">
<img src="img/warning.png"/>
<p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
</div>
<div class="top_bottom">
<button>扫码登录</button>|
<button>账号登录</button>
</div>
</div>
<div class="info_middle">
<!--输入框模块-->
<div class="username">
<img src="img/pygame.png"/>
<input type="text" name="username" id="" value="" placeholder="邮箱/用户名/已验证手机号"/>
</div>
<div class="password">
<img src="img/password_icon.png"/>
<input type="password" name="password" id="" value="" placeholder="密码"/>
</div>
<a target="_blank" href="https://safe.jd.com/findPwd/index.action">忘记密码</a>
<div class="login">
<button>登 录</button>
<div class="login_bottom"></div>
</div>
</div>
<div class="info_bottom">
<div class="bottom_flag">
<a class="bottom_flag_a1" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=6E2DEE02B55E305BE91EC48885C047F233CAABE7638872B776699C124A2E3331D5C61A860529E6BE331CCA91204DCD81&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3D451b8a5bc7bc47dc81f925f1db501f0c"><img src="img/qq.png"/>QQ</a>
|
<a class="bottom_flag_a2" href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=D3DC8163EDBE83BE2AC0AAA4540E4F7FCB2534A76DC156871E7D7100D06AB08C6EB0823F69F16F674D53BECECAB480CE&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Df5e62067ed30425aab5e3f2cc8011d07&response_type=code&scope=snsapi_login#wechat_redirect"><img src="img/weixin.png"/>微信</a>
<a class="bottom_flag_a3" href=""><img src="img/right.png"/>立即注册</a>
</div>
</div>
</div>
</div>
</div>
<!--========3.底部==========-->
<div id="footer">
<div class="footer1">
<a target="_blank" href="https://www.jd.com/">关于我们</a>|
<a target="_blank" href="http://about.jd.com/contact">联系我们</a>|
<a target="_blank" href="http://zhaopin.jd.com/home;jsessionid=8CB9D663EACCA9BD019E21F9E0B2261F.s1">人才招聘</a>|
<a target="_blank" href="//www.jd.com/contact/joinin.aspx">商家入驻</a>|
<a target="_blank" href="//www.jd.com/intro/service.aspx">广告服务</a>|
<a target="_blank" href="https://app.jd.com/">手机京东</a>|
<a target="_blank" href="https://club.jd.com/links.aspx">友情链接</a>|
<a target="_blank" href="https://media.jd.com/">销售联盟</a>|
<a target="_blank" href="https://sale.jd.com/act/n0hAvqy5CW8.html">京东社区</a>|
<a target="_blank" href="https://gongyi.jd.com/">京东公益</a>|
<a target="_blank" href="https://www.joybuy.com/">English Site</a>
<p>Copyright © 2004-2018 京东JD.com 版权所有</p>
</div>
</div>
</body>
</html>
CSS
/*======0.通用===========*/
*{
margin: 0;
padding: 0;
position: relative;
}
a{
text-decoration: none;
}
/*==========1.header================*/
#header{
width: 100%;
height: 120px;
background-color: white;
text-align: center;
}
#header .h-top{
display: inline-block;
width: 1111px;
height: 80px;
background-color: white;
}
#header .h-top .icon{
position: absolute;
left: 50px;
height: 60px;
top: 50%;
/*line-height: 60px;*/
margin: -30px 0 0 0;
}
#header .h-top .a2{
/*布局*/
position: absolute;
right: 0px;
bottom: 10px;
/*字体*/
font-size: 12px;
color: rgb(153,153,153);
/*背景图*/
background-image: url(../img/q-icon.png);
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 22px;
}
#header .h-top a:hover{
color: red;
text-decoration: underline;
}
#header .h-bottom{
width: 100%;
height: 40px;
background-color: rgb(255,248,240);
text-align: center;
}
/*用图片*/
#header .h-bottom div, #content .centent-1 .input_div .info_top .top-top{
display: inline;
/*height: 20px;
line-height: 20px;*/
}
#header .h-bottom div img, #content .centent-1 .input_div .info_top .top-top img{
top: 9px;
}
#header .h-bottom p, #content .centent-1 .input_div .info_top .top-top p{
font-size: 12px;
color: rgb(153,153,153);
display: inline;
}
/*用背景图时*/
/*#header .h-bottom p{
position: absolute;
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 12px;
color: rgb(153,153,153);
background-image: url(../img/warning.png);
background-repeat: no-repeat;
background-position: 20% center;
}*/
#header .h-bottom div p a{
color: rgb(51,51,51);
}
#header .h-bottom div p a:hover{
text-decoration: underline;
}
/*============2.content=======================*/
#content{
width: 100%;
height: 514px;
/*text-align: center;*/
background-color: rgb(11,142,212);
}
#content .centent-1{
width: 1000px;
height: 514px;
left: 12%;
background-image: url(../img/bg3.png);
background-repeat: no-repeat;
background-position: 0px center;
/*background-size: 52% 514px;*/
background-color: rgb(11,142,212);
/*background-color: yellow;*/
}
#content .centent-1 .input_div{
width: 340px;
height: 440px;
background-color: white;
position: absolute;
right: 0px;
top: 12px;
}
#content .centent-1 .input_div .info_top{
height: 100px;
text-align: center;
background-color: rgb(255,248,240);
}
#content .centent-1 .input_div .info_top .top_bottom{
height: 55px;
width: 100%;
background-color: white;
text-align: center;
position: absolute;
bottom: 0px;
/*设置竖线颜色*/
color: rgb(151,151,151);
/*设置分割线*/
border-bottom: 1px solid rgba(151,151,151,0.5);
}
#content .centent-1 .input_div .info_top .top_bottom button{
width: 160px;
height: 53px;
border: 0;
background-color: white;
font-size: 21px;
color: rgb(51,51,51);
}
#content .centent-1 .input_div .info_top .top_bottom button:hover{
color: red;
}
#content .centent-1 .input_div .info_top .top_bottom button:focus{
color: red;
/*按钮和输入框成为焦点后默认的边框，是outline*/
outline: none;
}
#content .centent-1 .input_div .info_middle{
background-color: white;
height: 280px;
}
#content .centent-1 .input_div .info_middle .username{
background-color: white;
width: auto;
height: 40px;
position: absolute;
left: 20px;
right: 20px;
top: 25px;
border: 1px solid rgba(189,189,189,0.5);
}
#content .centent-1 .input_div .info_middle .password{
background-color: white;
width: auto;
height: 40px;
position: absolute;
left: 20px;
right: 20px;
top: 100px;
border: 1px solid rgba(189,189,189,0.5);
}
#content .centent-1 .input_div .info_middle img{
float: left;
height: 100%;
border: 1px solid rgba(189,189,189,0.5);
}
#content .centent-1 .input_div .info_middle input{
float: left;
top: 0px;
border:none;
height: 100%;
width: 80%;
padding-left: 10px;
}
/*设置成为焦点时的状态*/
#content .centent-1 .input_div .info_middle input:focus{
outline: none;
}
#content .centent-1 .input_div .info_middle a{
position: absolute;
top: 170px;
right: 20px;
font-size: 12px;
color: rgb(189,189,189);
}
#content .centent-1 .input_div .info_middle a:hover{
color: red;
text-decoration: underline;
}
#content .centent-1 .input_div .info_middle .login{
background-color: rgb(228,57,60);
width: auto;
height: 40px;
position: absolute;
left: 20px;
right: 20px;
top: 220px;
text-align: center;
line-height: 40px;
}
#content .centent-1 .input_div .info_middle .login button{
border: 0px;
background-color: rgb(228,57,60);
font-size: 21px;
color: white;
}
#content .centent-1 .input_div .info_middle .login .login_bottom{
position: absolute;
width: 340px;
left: -20px;
bottom: 0px;
top: 59px;
/*设置分割线*/
border-bottom: 1px solid rgba(151,151,151,0.5);
}
#content .centent-1 .input_div .info_bottom{
background-color: rgb(252,252,252);
height: 60px;
}
#content .centent-1 .input_div .info_bottom .bottom_flag{
display: block;
position: absolute;
left: 20px;
top: 10px;
text-align: center;
/*设置竖线颜色*/
color: rgb(151,151,151);
}
#content .centent-1 .input_div .info_bottom .bottom_flag_a1,#content .centent-1 .input_div .info_bottom .bottom_flag_a2{
font-size: 13px;
color: rgb(102,102,102);
}
#content .centent-1 .input_div .info_bottom a:hover{
color: red;
text-decoration: underline;
}
#content .centent-1 .input_div .info_bottom a img{
position: relative;
top: 8px;
}
#content .centent-1 .input_div .info_bottom .bottom_flag .bottom_flag_a3{
color: red;
position: relative;
top: 2px;
left: 113px;
font-size: 16px;
}
/*=============3.footer=================*/
#footer{
width: 100%;
height: 86px;
background-color: white;
text-align: center;
}
#footer .footer1{
display: inline-block;
width: 1111px;
height: 62px;
position: relative;
top: 24px;
background-color: white;
/*设置竖线颜色*/
color: rgb(151,151,151);
}
#footer .footer1 a{
font-size: 13px;
color: rgb(102,102,102);
padding-left: 10px;
padding-right: 10px;
}
#footer .footer1 a:hover{
color: red;
text-decoration: underline;
}
#footer .footer1 p{
width: 1080px;
position: relative;
top: 10px;
color: rgb(102,102,102);
font-size: 12px;
}
