<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 样式初始化 */
body,html,h1,h2,h3,h4,h5,h6,input,dl,dt,dd,ul,ol,li,p{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
}
ul,
ol{
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
color:#e4393c;
}
.left{
float: left;
}
.right{
float: right;
}
.clear{
display: block;
line-height: 0;
height: 0;
opacity: 0;
clear: both;
}
.inner{
width: 990px;
margin: 0 auto;
border: 1px solid #ccc;
}
/* 页头位置的样式的书写 */
header>.inner{
height: 80px;
border: none;
}
header>.inner>.logo{
height: 60px;
margin-top: 10px;
}
header>.inner .welcome{
margin-top: 15px;
margin-left: 15px;
}
header>.inner>a.right{
margin-top: 55px;
}
header>.inner>a.right>em{
display: inline-block;
width: 18px;
height: 14px;
background: url('../image/3.png') no-repeat;
vertical-align: -3px;
}
/* 警告框位置样式搭建 */
#warn{
background-color: #fff8f0;
}
nav>.inner{
border: none;
height: 40px;
line-height: 40px;
text-align: center;
color:#999;
}
nav>.inner>a{
color:#333;
}
nav>.inner>em{
display: inline-block;
width: 16px;
height: 16px;
background:url(./image/4.png) no-repeat;
vertical-align: -3px;
}
/* 页脚部分样式 */
footer{
color: #999;
text-align: center;
margin-top: 10px;
}
footer>.inner{
border: none;
}
footer>.inner>p{
height: 30px;
line-height: 30px;
}
footer>.inner>p>a{
color: #999;
margin:0 5px
}
/* 主体内容的样式搭建 */
main{
background-color: #e93854;
}
main>.inner{
height: 475px;
border: none;
background: url(./image/13.png) no-repeat;
}
main>.inner>#loginBox{
width: 346px;
height: 400px;
background-color: #fff;
margin-top: 10px;
}
#loginBox>header{
height: 40px;
line-height: 40px;
color: #999;
text-align: center;
background:#fff8f0 url(./image/4.png) no-repeat 5px;
}
#loginBox>nav{
height: 54px;
line-height: 54px;
border-bottom: 1px solid #f4f4f4;
position: relative;
}
#loginBox>nav>div{
width: 50%;
height: 100%;
text-align: center;
font-size: 20px;
color: #666;
cursor: pointer;
}
#loginBox>nav>div:hover,
#loginBox>nav>div.current{
font-weight: 900;
color: #e4393c;
}
#loginBox>nav>span{
position: absolute;
width: 1px;
height: 20px;
background-color: #f4f4f4;
top:50%;
margin-top: -10px;
}
#loginBox>form{
padding: 13px 20px;
}
#loginBox>form>p{
margin-top: 20px;
width: 306px;
height: 40px;
position: relative;
}
#loginBox>form>p>input{
width: 306px;
height: 40px;
border: 1px solid #000;
outline: none;
box-sizing: border-box;
padding-left: 45px;
}
#loginBox>form>p>label{
width: 38px;
height: 38px;
position: absolute;
background: url(./image/5.png) no-repeat 0 -48px;
left: 1px;
top:1px
}
#loginBox>form>p.password>label{
background-position: -48px -48px;
}
#loginBox .forget_password{
text-align: right;
}
#loginBox .submit{
height: 34px;
}
#loginBox .submit button{
width: 100%;
height: 100%;
color: #fff;
background-color: #e4393c;
border: 1px solid #e4393c;
font-size: 20px;
/* 字符间距 */
letter-spacing: 20px;
padding-left: 20px;
}
#loginBox>footer{
height: 50px;
line-height: 50px;
background-color: #fcfcfc;
border-top: 1px solid #f4f4f4;
margin-top: 20px;
padding: 0 20px;
}
#loginBox>footer .left em{
display: inline-block;
width: 18px;
height: 18px;
background: url(./image/12.png) no-repeat -1px 0px;
vertical-align: -4px;
}
#loginBox footer .left span{
margin: 0 7px;
}
#loginBox .left .wechat em{
background-position: -20px 0;
}
#loginBox footer .right em{
display: inline-block;
width: 16px;
height: 16px;
background:url(./image/5.png) no-repeat -104px -75px;
vertical-align: -3px;
}
</style>
</head>
<body>
<!-- 页面头部 -->
<header>
<div class="inner">
<div class="logo left">
<img src="./image/1.png" alt="">
<img src="./image/2.png" class="welcome" alt="">
</div>
<a href="" class="right">
<em></em>
登录页面,调查问卷
</a>
</div>
</header>
<!-- 警告部分 -->
<nav id="warn">
<div class="inner">
<em></em>
依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版
<a href="#" class="privacy">《京东隐私政策》</a>
已上线,将更有利于保护您的个人隐私。
</div>
</nav>
<!-- 主体内容 -->
<main>
<div class="inner">
<div id="loginBox" class="right">
<header>
京东不会以任何理由要求您转账汇款,谨防诈骗
</header>
<!-- 登录方式 -->
<nav>
<div class="left">扫码登录</div>
<span></span>
<div class="right current">账号登录</div>
</nav>
<form action="">
<p class="username">
<label for="username"></label>
<input type="text" id="username" name="username">
</p>
<p class="password">
<label for="password"></label>
<input type="password" id="password" name="password">
<!-- <label>
用户名:<input type="text">
</label> -->
</p>
<p class="forget_password">
<a href="">忘记密码</a>
</p>
<p class="submit">
<button>登录</button>
</p>
</form>
<footer>
<div class="left">
<a href="#" class="qq">
<em></em>
QQ
</a>
<span>|</span>
<a href="#" class="wechat">
<em></em>
微信
</a>
</div>
<a href="" class="right">
<em></em>
立即注册
</a>
</footer>
</div>
</div>
</main>
<!-- 页脚部分 -->
<footer>
<div class="inner">
<p class="links">
<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>
<p class="copy">
Copyright © 2004-2022 京东JD.com 版权所有
</p>
</div>
</footer>
</body>
</html>
09-20
3154
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-29
07-22
3834
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
01-15
01-30
10-28
1562
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)