html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东-欢迎登陆</title>
<!--设置网页图标
rel="icon"(设置图标)
type:文件类型 image/图片类型(png,ico,x-icon)
-->
<link rel="icon" type="image/x-icon" href="img/icon.ico"/>
<link rel="stylesheet" type="text/css" href="css/京东.css"/>
</head>
<body>
<!--=============1.顶部=============-->
<div id="header">
<div class="h-top">
<!--图标部分-->
<div class="icon">
<img src="img/logo.png"/>
<img src="img/l-icon.png"/>
</div>
<!--问卷-->
<a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank">登录页面,调查问卷</a>
</div>
<!--下面的文字-->
<div class="h-bottom">
<div>
<img src="img/warning.png"/>
<p>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。
</p>
</div>
</div>
</div>
<!--2.=============中间内容=============-->
<div id="content">
<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-mid">
<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 href="https://safe.jd.com/findPwd/index.action">忘记密码</a>
<button>登 录</button>
</div>
<div class="info-bottom">
<div class="qq">
<img src="img/qq.png"/>
<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=E331FE48AD375D8BEE4B3D04FF8F5EFBDDC24CD6F7DFCDB02B17C3F3CAD456A0F1FC1ED0B5BBC75A85C503153B4FA01F&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3Db6c4ac40ad184a0996151af07e0288a3">QQ</a>
</div>|
<div class="weixin">
<img src="img/weixin.png"/>
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=740B881D3CC888B5B8067B2145C14D2BFC94C0246E78CC5A2B53DE082641B0914132301A97F433EDFD59429B29191D14&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3D0b60e68e42e142d198cecfb1abbf0441&response_type=code&scope=snsapi_login#wechat_redirect">微信</a>
</div>
<div class="login">
<img src="img/right.png"/>
<a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com" target="_blank">立即注册</a>
</div>
</div>
</div>
</div>
<!--=============3.底部=============-->
<div id="footer">
<div class="other">
<a href="">关于我们</a> |
<a href="">联系我们</a> |
<a href="">人才招聘</a> |
<a href="">商家入驻</a> |
<a href="">广告服务</a> |
<a href="">手机京东</a> |
<a href="">友情链接</a> |
<a href="">销售联盟</a> |
<a href="">京东社区</a> |
<a href="">京东公益</a> |
<a href="">English Site</a>
<p>Copyright © 2004-2018 京东JD.com 版权所有</p>
</div>
<div></div>
</div>
</body>
</html>
css:
/*=============0.通用=============*/
*{
margin: 0;
padding: 0;
position: relative;
}
a{
text-decoration: none;
}
/*=============1.hearer=============*/
#header{
width: 100%;
height: 120px;
}
#header .h-top{
width: 100%;
height: 80px;
/*background-color: chartreuse;*/
}
#header .h-top .icon{
position: absolute;
left: 142px;
/*垂直居中*/
height: 60px;
top: 50%;
line-height: 50%;
margin: -30px 0 0 0;
}
#header .h-top a{
/*布局*/
position: absolute;
right: 35px;
bottom: 10px;
/*字体大小*/
font-size: 14px;
color: rgb(153,153,153);
/*背景图*/
background: url(../img/q-icon.png) no-repeat 0 center;
padding-left:20px ;
}
#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, .top-top p{
/*background-color: chartreuse;*/
display: inline;
}
#header .h-bottom div p, .top-top p{
font-size: 12px;
color: rgb(153,153,153);
display: inline;
}
#header .h-bottom div img, .top-top img{
top: 8px;
}
/*用背景图的时候*/
/*#header .h-bottom p{
text-align: center;
height: 40px;
line-height: 40px;
color: rgb(153,153,153);
font-size: 12px;
background-image: url(../img/warning.png) no-repeat 0 center;
}*/
#header .h-bottom p a{
color: rgb(40,40,40);
}
#header .h-bottom p a:hover{
text-decoration: underline;
}
/*=============2.content=============*/
/*内容整体*/
#content{
width: 100%;
height: 514px;
background: url(../img/TIM图片20180816144813.png) no-repeat 20% center;
background-color: rgb(11,142,212);
}
/*登录框*/
#content .input_div{
width: 344px;
height: 438px;
background-color: white;
position: absolute;
right: 160px;
top: 10px;
}
/*登录框顶部*/
#content .input_div .info-top{
height: 100px;
background-color: rgb(255,248,240);
text-align: center;
}
#content .input_div .info-top .top-bottom{
height: 55px;
width: 100%;
background-color: white;
position: absolute;
bottom: 0px;
/*设置竖线颜色*/
color: rgb(200,200,200);
/*分割线*/
border-bottom: 1px solid rgb(200,200,200);
}
#content .input_div .info-top .top-bottom button{
width: 100px;
height: 50px;
/*去掉背景颜色和边框*/
border: 0;
background-color: rgb(0,0,0,0);
font-size: 20px;
color: rgb(53,53,53);
}
#content .input_div .info-top .top-bottom button:hover{
color: red;
}
#content .input_div .info-top .top-bottom button:focus{
color: red;
/*按钮和输入框成为焦点后默认的边框,是outline*/
outline: 0;
}
/*登录框中部*/
#content .input_div .info-mid{
height: 288px;
background-color: white;
}
#content .input_div .info-mid .username ,#content .input_div .info-mid .password{
background-color: white;
width: auto;
height: 40px;
position: absolute;
left: 20px;
right: 20px;
top: 40px;
border: 1px solid rgb(80,80,80);
}
#content .input_div .info-mid .password{
top: 110px;
}
#content .input_div .info-mid img{
float: left;
height: 100%;
border: 1px solid rgba()(80,80,80,0.5);
}
#content .input_div .info-mid input{
border: 0;
float: left;
height: 100%;
width: 80%;
padding-left: 15px;
}
/*设置成为焦点的状态*/
#content .input_div .info-mid input:focus{
outline: none;
}
#content .input_div .info-mid a{
/*float: right;*/
position: absolute;
top: 180px;
right: 20px;
font-size: 12px;
color: rgb(200,200,200);
}
#content .input_div .info-mid a:hover{
color: red;
text-decoration: underline;
}
#content .input_div .info-mid button{
position: absolute;
bottom: 20px;
left: 32px;
width: 80%;
height: 42px;
background-color: #FF0000;
font-family: "微软雅黑";
font-size: 25px;
color: white;
text-align: center;
border: 0;
}
/*登录框底部*/
#content .input_div .info-bottom{
float: left;
height: 50px;
width: 80%;
border-top: 1px solid rgba(220,220,220,0.5);
}
#content .input_div .info-bottom .qq , .weixin{
display: inline;
/*text-align: center;*/
font-size: 13px;
}
#content .input_div .info-bottom .qq a:hover , .weixin a:hover{
color: red;
text-decoration: underline;
}
#content .input_div .info-bottom .qq img{
position: relative;
top: 7px;
}
#content .input_div .info-bottom .weixin img{
position: relative;
top: 8px;
}
#content .input_div .info-bottom{
position: relative;
top: 7px;
left: 30px;
color: rgb(200,200,200);
}
#content .input_div .info-bottom .login{
position: relative;
top: -80;
bottom: 28px;
left: 180px;
font-size: 13px;
}
#content .input_div .info-bottom .login a:hover{
text-decoration: underline;
}
#content .input_div .info-bottom .login img{
top: 8px;
}
/*3.=============3.footer=============*/
#footer{
position: relative;
width: 100%;
height: 86;
background-color: white;
text-align: center;
top: 15px;
}
#footer .other a{
font-size: 13px;
}
#footer .other a:hover{
color: #FF0000;
text-decoration: underline;
}
#footer .other p{
position: relative;
top: 20px;
font-size: 13px;
}
效果图:
网友评论