<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东登录页面</title>
<style>
.top{
width: 1400px;
margin: 0;
}
.logo{
margin-left: 30px;
}
.upper{
width: 1400px;
height: 40px;
background-color: antiquewhite;
text-align: center;
font-size: 15px;
margin-top: 20px;
font-family: "微软雅黑";
padding-top: 17px;
}
.main{
width: 1400px;
height: 400px;
background-color:#e93854;
}
.login{
width: 200px;
height: 240px;
float: right;
background-color:white;
margin-top: 100xp;
border: 1px solid gray;
padding: 40px 40px 40px 40px;
border-radius: 10px;
box-shadow: 2px 2px 2px;
vertical-align: center;
margin-top: 40px;
margin-right: 270px;
}
.index{
list-style-type: none;
display: inline-block;
}
.bottom ul{
text-align: center;
margin-top: 20px;
}
.bottom ul li{
display: inline-block;
list-style: none;
text-align: center;
font-size: 12px;
margin-top: 10px;
}
a{
text-decoration: none;
color: #666;
text-align: center;
}
.main img{
margin-left: 20%;
}
*{
margin: 0;
padding: 0;
}
.login ul li{
list-style: none;
display: inline-block;
font-size:14px ;
color: #666;
margin-top: 30px;
}
.forg{
text-align: right;
font-size: 12px;
color: #666;
margin-top: 10px;
}
.input{
width: 200px;
height: 30px;
border: 1px solid #bbddbb;
margin-top: 20px;
text-align: center;
}
.input input{
outline: none;
border: none;
margin-top: 10px;
text-align: left;
}
.signin{
background-color: rgb(229, 112, 112);
width: 200px;
height: 25px;
border-radius: 5px;
margin-top: 20px;
}
p{
font-size: 12px;
text-align: center;
color: #666;
}
input:focus{
width: 180px;
height: 30px;
}
.login .r1{
color: red;
}
</style>
</head>
<body>
<div class="top">
<div class="logo"><img src="logo.jpg" width="200px" height="150px" alt=""></div>
</div>
<div class="upper">依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!新版《京东隐私政策》已上线,将更有利于保护您的个人隐私。</div>
<div class="main">
<img src="登录界面.jpg" width="400px" height="400px" alt="">
<div class="login">
<span class="r1" >密码登录</span>
<span class="r2">短信登录</span>
<div class="input"> <input type="text" placeholder="账号名/手机号/邮箱" name="username"></div>
<div class="input"><input type="password" placeholder="密码" name="password" required></div>
<div class="forg">忘记密码</div>
<button type="submit" class="signin"><a href="https://www.baidu.com">登 录</a></button>
<ul>
<li class="qq">QQ</li>
<li class="vx">微信</li>
<li class="zhuce">立即注册</li>
</ul>
</div>
</div>
<div class="bottom">
<ul>
<li><a href="#">关于我们 <span>|</span></a></li>
<li><a href="#">联系我们 <span>|</span></a></li>
<li><a href="#">人才招聘 <span>|</span></a></li>
<li><a href="#">商家入驻 <span>|</span></a></li>
<li><a href="#">广告服务 <span>|</span></a></li>
<li><a href="#">手机京东 <span>|</span></a></li>
<li><a href="#">友情链接 <span>|</span></a></li>
<li><a href="#">销售联盟 <span>|</span></a></li>
<li><a href="#">京东社区 <span>|</span></a></li>
<li><a href="#">京东公益</a></li>
</ul>
<p>Copyright©2004-2024 京东JD.com 版权所有</p>
</div>
</body>
</html>
html第三次作业
最新推荐文章于 2024-08-21 20:15:01 发布