<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东</title>
<link rel="stylesheet" href="./css/top.css">
<link rel="stylesheet" href="./css/center.css">
<link rel="stylesheet" href="./css/bottom.css">
<link rel="stylesheet" href="./css/three.css">
</head>
<body>
<!-- 头部 -->
<div id="top">
<img src="./tu/logo.png" alt="">
<img src="./tu/l-icon.png" alt="" id="login">
<span id="denglu"><a href="./调查问卷.html">登录页面，改进建议</a></span>
</div>
<!-- 第二部分 -->
<div id="part">
<div id="tips">
<ul>
<li>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版 <span id="color"><a href="./隐私政策.html">《京东隐私政策》</a></span>已上线，将更有利于保护您的隐私。</li>
</ul>
</div>
</div>
<!-- 第三部分 -->
<div id="zong">
<!-- 图片 -->
<div id="lg">
<!--表单-->
<div id="ziti">
<!-- 页面上部分 -->
<div id="zhuang"> 京东不会以任何理由要求您转账，谨防诈骗 </div>
<div id="code"></div>
<span id="quite">扫码登录安全快捷</span>
<div id="red">
<a href="#" class="enter">密码登录</a>
<a href="./短信.html" class="note">短信登录</a>
</div>
<div id="e-mail">
<input type="text" name="" placeholder="账户名/手机号/邮箱" class="case">
<input type="password" placeholder="密码" class="case">
<a href="#" class="forget">忘记密码</a>
</div>
<input type="submit" id="inter" value="登录">
<!-- QQ微信 -->
<div id="we">
<div id="qq"><a href="https://im.qq.com/index/">QQ</a></div>
<div id="WeChat"><a href="https://wx.qq.com/">微信</a></div><a href="#" class="login">立即注册</a>
</div>
</div>
</div>
<!-- 第四部分 -->
<div id="four">
<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><br><br>
<span id="copyright"> Copyright © 2004-2023 京东JD.com 版权所有</span>
</div>
</div>
</body>
</html>/* 顶部 */
*{
margin: 0px auto;
padding: 0px;
color: grey;
font-size: 12px;
}
body{
background-color: rgb(255, 255, 255);
}
#top{
width: 990px;
background-color: rgb(255, 255, 255);
}
margin-left: 10px;
}
#denglu a{
margin-left: 300px;
padding-left: 20p
#login{x;
text-decoration: none;
background: url(../tu/q-icon.png) no-repeat 1px;
}
/* 第二部分*/
#tips{
width: 990px;
background: url(../tu/icon-tips.png) no-repeat 100px;
background-color: rgb(255, 248, 240);
padding-top: 10px;
padding-bottom: 10px;
}
#tips li{
text-align: center;
list-style: none;
}
#part{
background-color:rgb(255, 248, 240);
}
#color a{
color: black;
text-decoration: none;
}/* 整体 第三部分 */
#zong{
height: 475px;
background-color: rgb(235, 221, 210);
}
#lg{
width: 990px;
height: 475px;
background-image: url(../tu/bg.jpg) ;
}
#zhuang{
width: 300px;
height: 20px;
border-radius: 10px;
margin-right: 1px;
text-align: center;
border-radius: 15px;
color: rgb(248, 116, 76);
background: url(../tu/icon-tips.png) no-repeat 1px;
background-position: 15px 0px;
background-color: antiquewhite;
}
#ziti{
width: 300px;
float: right;
margin-top: 100px;
border-radius: 10px;
background-color: rgb(252, 250, 247);
}
#code{
width: 50px;
height: 42px;
background-image: url(../tu/qrcode.png);
background-size: 50px 50px;
float: right;
}
#quite{
color: rgb(249, 244, 244);
font-size: 16px;
padding: 2px 10px;
background-color:rgb(158, 156, 156) ;
margin-left: 90px;
border-radius: 5px;
}
#red{
margin-top: 15px;
}
#red a{
text-decoration: none;
font-size: 17px;
}
.enter{
color: red;
padding-left: 20px;
}
.note{
padding-left: 20px;
}
#e-mail{
margin: 10px 20px;
}
.case{
width: 250px;
border-radius: 5px;
margin-bottom: 15px;
padding: 8px;
border: 1px solid rgb(151, 150, 150);
}
.forget{
text-decoration: none;
float: right;
color: black;
}
#inter{
width: 260px;
height: 30px;
font-size: 14px;
color: rgb(243, 237, 237);
margin-left: 20px;
margin-top: 10px;
background-color: rgb(224, 92, 92);
border: none;
border-radius: 5px;
}
#we{
margin-top: 30px;
width: 285px;
height: 30px;
padding-top: 20px;
padding-left: 15px;
border-radius: 0px 10px;
background-color: rgb(226, 223, 221);
}
#qq{
width: 19px;
height: 18px;
background: url(../tu/QQ-weixin.png) ;
float: left;
}
#qq a{
text-decoration: none;
padding-left: 25px;
}
#WeChat{
width: 19px;
height: 18px;
background: url(../tu/QQ-weixin.png) ;
background-position: 19px;
}
#WeChat a{
text-decoration: none;
width: 50px;
padding-left: 25px;
display: inline-block;
}
.login{
text-decoration: none;
float: right;
margin-top: -17px;
background-color: rgb(red, green, blue);
}
/* 第四部分 底部*/
#four{
width: 990px;
height: 100px;
padding-top: 20px;
text-align: center;
background-color: rgb(255, 255, 255);
}
#four a{
padding: 10px;
color: black;
text-decoration: none;
text-align: center;
}
#copyright{
color: black;
}需图找我噢~
