<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--设置网页标题-->
<title>京东-欢迎登录</title>
<!--设置网页图标-->
<link rel="icon" type="image/jpg" href="http://www.kaitao.cn/data/upload/ueditor/20170829/59a4d994565e7.jpg"/>
<!--导入样式表-->
<link rel="stylesheet" type="text/css" href="css/index1.css"/>
</head>
<body>
<!--===================顶部====================-->
<div id="header">
<!--====顶部的顶部====-->
<div id="top">
<div>
<img src="img/logo.png"/>
<img src="img/l-icon.png"/>
</div>
<a id="survey" target="_blank" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面，调查问卷</a>
</div>
<!--====顶部的底部====-->
<div id="bottom">
<p><img src="img/warning.png"/>  依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="" target="_blank">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
</div>
<!--===================中间=====================-->
<div id="content">
<!--登录框-->
<div id="login_page">
<!--提示-->
<div id="div1">
<img src="img/xx.png"/>
<p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
</div>
<!--按钮-->
<div id="div2">
<button id="btn1">扫码登录</button>|
<button id="btn2">账号登录</button>
</div>
<!--输入信息-->
<div id="div3"><br />
<div id='username' >
<img src="img/pygame.png" id="img1"/>
<input type="text" name="username" id="" value="" placeholder="邮箱/用户名/已验证手机" />
</div>
<div id="password">
<img src="img/password_icon.png" id="img1"/>
<input type="password" name="password" id="" value="" placeholder="密码"/>
</div>
<a href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
<button>登 录</button>
</div>
<!--第三方登录-->
<div id="div4">
<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=D69AB431B9BC4FD0DB0190FDE6062526E08D87BA058AF47F56708ECC647B70CD689C9D11D45467615B9274D6712E7EC1&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3D37a49a3d089b47d3b9d1e4c63b91d2fa" id="a1">QQ
</a>|
<a href="" id="a2">微信
</a>
<a href="" id="a3">立即注册
</a>
</div>
</div>
</div>
<!--===================底部=====================-->
<div id="footer">
<div>
<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>
</div>
<p>
Copyright © 2004-2018 京东JD.com 版权所有
</p>
</div>
</body>
</html>
CSS样式
/*==============(通用)================*/
*{
/*消除默认的margin*/
margin: 0;
/*消除默认padding*/
padding: 0;
/*让所有标签的子标签都相对自己定位*/
position: relative;
}
/*===============顶部=================*/
#header{
height: 130px;
background-color: seagreen;
}
/*====顶部的顶部====*/
#header #top{
height: 80px;
background-color: white;
}
#header #top div{
width: 292px;
height: 60px;
/*相对定位-会让标签脱流*/
position: absolute;
left: 150px;
/*垂直居中*/
top: 50%;
margin-top: -30px;
line-height: 60px;
}
#header #top #survey{
/*布局*/
position: absolute;
right: 180px;
bottom: 10px;
/*设置字体*/
color: rgb(180, 180, 180);
font-size: 13px;
/*去掉下划线*/
text-decoration: none;
/*添加背景图 要加三个值
* background:url(图片地址)
* repeat/no-repeat x y
* x,y左边对应的值，除了可以设置具体数字值外还可以设置center让背景图在x和y方向居中
* 背景颜色
* */
padding-left: 22px ;
background: url(../img/q-icon.png) no-repeat 0 center white;
}
#header #top #survey:hover{
color: red;
text-decoration: underline;
}
/*====顶部的底部====*/
#header #bottom{
height: 50px;
background-color:rgb(255,246,236);
}
#header #bottom p a{
height: 50px;
text-decoration: none;
color: rgb(30,30,30);
}
#header #bottom p a:hover{
/*color: red;*/
text-decoration: underline;
}
#header #bottom p{
/*垂直方向居中*/
height: 50px;
line-height: 50px;
/*水平居中*/
text-align: center;
/*设置字体*/
font-size: 10px;
color: rgb(150,150,150);
}
#header #bottom p img{
/*垂直居中*/
height: 25px;
position: absolute;
top: 50%;
margin: -12px;
line-height: 25px;
}
/*===============中间=================*/
#content{
height: 470px;
/*background-color: sandybrown;*/
background: url(../img/bg2.png) no-repeat 100px center rgb(77,157,254);
}
/*===============登录============*/
#content #login_page{
width: 350px;
height: 400px;
background-color: white;
/*定位*/
position: absolute;
right: 130px;
top: 30px;
}
/*=============提示块========*/
#content #login_page #div1{
height: 40px;
background-color: rgb(255,246,236);
}
#content #login_page #div1 p{
/*float: left;*/
font-size: 12px;
height: 40px;
/*font: "微软雅黑";*/
line-height: 40px;
text-align: center;
color: rgb(150,150,150);
}
#content #login_page #div1 img{
/*float: left;*/
height: 16px;
position: absolute;
left: 30px;
top: 50%;
margin: -8px;
/*line-height:2 5px;*/
}
/*============登录方式==========*/
#content #login_page #div2{
height: 60px;
/*background-color: aquamarine;*/
color: rgba(220,220,220,0.5);
/*字体粗细；取值范围100-900*/
font-weight: 100;
}
#content #login_page #div2 button{
width: 48%;
height: 100%;
border: 0;
background-color: white;
font-size: 18px;
color: rgb(50,50,50);
}
/*设置按钮成为焦点*/
#content #login_page #div2 button:focus{
color: red;
/*按钮成为焦点的边框效果*/
outline: 0;
}
/*===============信息收集=========*/
#content #login_page #div3{
height: 250px;
/*设置边框*/
border-bottom: solid rgba(220,220,220,0.6) 1px;
border-top: solid rgba(220,220,220,0.6) 1px;
}
#content #login_page #div3 div{
/*background-color: antiquewhite;*/
width: 300px;
height: 40px;
margin-left: 25px;
margin-top: 20px;
border: solid rgb(170,170,170) 1px;
}
#content #login_page #div3 #username{
margin-top: 25px;
}
/*图片*/
#content #login_page #div3 img{
width: 40px;
height: 40px;
float:left;
border-right:solid rgb(170,170,170) 1px;
}
/*输入框*/
#content #login_page #div3 div input{
width:240px;
height: 40px;
float: left;
padding-left: 10px;
padding-top: 0;
border:0;
font-size: 14px;
}
#content #login_page #div3 div input:focus{
outline: 0;
}
/* 忘记密码*/
#content #login_page #div3 a{
position: absolute;
right: 25px;
margin-top: 20px;
color: rgb(120,120,120);
font-size: 12px;
text-decoration: none;
}
#content #login_page #div3 a:hover{
color: red;
text-decoration: underline;
}
/*登录按钮*/
#content #login_page #div3 button{
width: 300px;
margin-left: 25px;
height: 35px;
position: absolute;
bottom: 20px;
background-color: rgb(219,34,46);
border: 0;
color: white;
font-size: 20px;
}
/*================第三方登录=======================*/
#content #login_page #div4{
height: 50px;
/*background-color:chartreuse;*/
line-height: 50px;
font-size: 10px;
color: rgba(140,140,140,0.9);
}
#content #login_page #div4 #a1{
/*margin-top:5px ;*/
margin-left: 25px;
margin-right: 15px;
color: rgb(89,89,89);
font-size: 12px;
text-decoration: none;
background: url(../img/qq.png) no-repeat 0 center white;
padding-left: 25px;
padding-top: 3px;
}
#content #login_page #div4 #a2{
margin-left: 5px;
color: rgb(89,89,89);
font-size: 12px;
text-decoration: none;
background: url(../img/weixin.png) no-repeat 0 center white;
padding-left: 25px;
padding-top: 3px ;
}
#content #login_page #div4 #a3{
position: absolute;
right: 25px;
color: rgb(165,10,23);
font-size: 12px;
text-decoration: none;
background: url(../img/right.png) no-repeat 0 center rgba(0,0,0,0);
padding-left: 25px;
}
#content #login_page #div4 #a1:hover{
color: red;
text-decoration: underline;
}
#content #login_page #div4 #a2:hover{
color: red;
text-decoration: underline;
}
#content #login_page #div4 #a3:hover{
/*color: red;*/
text-decoration: underline;
}
/*===============底部=================*/
#footer{
height: 105px;
/*background-color: gold;*/
color: rgba(0,0,0,0.6);
}
#footer div{
height: 50px;
/*background-color: #2E8B57;*/
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 50px;
font-size: 13px;
}
#footer div a{
margin-left: 12px;
margin-right: 12px;
text-decoration: none;
color: rgb(89,89,89);
}
#footer div a:hover{
color: red;
text-decoration: underline;
}
#footer p{
color: rgb(89,89,89);
text-align: center;
font-size: 10px;
}
/*===========(通用)==============*/
