HTMl+CSS 模仿京东网登录页面
课后实践项目，仅页面效果，写博客纯属记录！
码云开源仓库地址：https://gitee.com/ynavc/jd
演示地址：https://ynavc.gitee.io/jd
效果图：
实现代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title>京东-欢迎登录</title>
</head>
<body>
<!-- 最外层的div -->
<div id="warp">
<!-- 顶部 -->
<div id="top">
<div class="top-left">
<a href="#"><img src="img/logo.png" ></a>
<a href="#"><img src="img/l-icon.png" ></a>
</div>
<div class="top-right">
<a href="#"><img src="img/q-icon.png" align="center"> 登陆页面，调查问卷</a>
</div>
</div>
<!-- 顶部下的提示文字 -->
<div class="cont-wrapper">
<p><img src="img/icon-tips.png" align="center"> 依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="#">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
<!-- 中间主要内容部分 -->
<div id="content">
<div class="login-wrap">
<!-- 中间背景图 -->
<div class="login-banner"></div>
<!-- 登陆表单部分 -->
<div class="login-form">
<!-- 表单顶部提示文字 -->
<div class="cont-wrapper">
<p><img src="img/icon-tips.png" align="center"> 京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
</div>
<!-- 登陆选项 -->
<div class="login-tab">
<div class="login-tab-item login-tab-left">
<a href="#">扫码登录</a>
</div>
<div class="login-tab-item login-tab-right">
<a href="#">账户登录</a>
</div>
</div>
<!-- 登录框 -->
<div class="login-box">
<div class="login-box-1">
<label></label>
<input type="text" name="" class="itxt" value="" placeholder="邮箱/用户名/登录手机" />
</div>
<div class="login-box-2">
<label></label>
<input type="text" name="" class="itxt" value="" placeholder="密码" />
</div>
<div class="login-box-3">
<a href="#">忘记密码</a>
</div>
<div class="login-box-4">
<a href="#">登录</a>
</div>
</div>
<!-- 尾部其他登录方式 -->
<div class="form-foot">
<ul>
<li><a href="#"><b class="QQ-icon"></b><span>QQ</span></a><span class="line">|</span></li>
<li><a href="#"><b class="weixin-icon"></b><span>微信</span></a></li>
<li><a href="#"><b></b>立即注册</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 网页尾部 -->
<div id="foot">
<div class="links">
<a rel="nofollow" target="_blank" href="//about.jd.com/">
关于我们
</a>
|
<a rel="nofollow" target="_blank" href="//www.jd.com/contact/">
联系我们
</a>
|
<a rel="nofollow" target="_blank" href="//zhaopin.jd.com/">
人才招聘
</a>
|
<a rel="nofollow" target="_blank" href="//lai.jd.com/">
商家入驻
</a>
|
<a rel="nofollow" target="_blank" href="//jzt.jd.com/">
广告服务
</a>
|
<a rel="nofollow" target="_blank" href="//app.jd.com/">
手机京东
</a>
|
<a target="_blank" href="//club.jd.com/links.aspx">
友情链接
</a>
|
<a target="_blank" href="//media.jd.com/">
销售联盟
</a>
|
<a href="//pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html" target="_blank">
京东社区
</a>
|
<a href="//gongyi.jd.com" target="_blank">
京东公益
</a>
|
<a target="_blank" href="//www.joybuy.com/" clstag="pageclick|keycount|20150112ABD|9">English Site</a>
</div>
<!-- 页脚 -->
<div class="copyright">
Copyright © 2004-2020 京东JD.com 版权所有
</div>
</div>
</div>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
}
/* 页面的外层 */
#warp{
width: 100vw;
height: 100vh;
}
/* —————顶部————— */
#top{
margin: 0 auto;
width: 1500px;
height: 80px;
background-color: white;
display: flex;
justify-content: space-around;
}
/* 顶部左边 */
.top-left{
margin: 10px 50px 0px 0px;
}
/* 顶部右边边 */
.top-right a{
position: relative;
color: #999;
float: right;
top: 52px;
line-height: 20px;
text-decoration: none;
font-size: 12px;
}
.top-right a:hover{
color: #E4393C;
text-decoration: underline;
}
/* —————顶部下面的提示文字————— */
.cont-wrapper{
background: #fff8f0;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.cont-wrapper img{
width: 17px;
height: 17px;
align-items: center;
}
.cont-wrapper p{
vertical-align: middle;
color: #999;
font-size: 12px;
display: inline-block;
}
.cont-wrapper a{
color: #333;
text-decoration: none;
}
.cont-wrapper a:hover{
text-decoration: underline;
}
/* —————中间表单部分————— */
#content{
/* width: 1200px; */
height: 450px;
margin: 0 auto;
background-color: #c4893b;
overflow: hidden;
}
/* 中间内容部分的外层 */
.login-wrap{
width: 900px;
height: 475px;
margin: 0 auto;
display: flex;
position: relative;
}
/* 中间背景图 */
.login-banner{
width: 100%;
position: relative;
z-index: 3;
height: 475px;
background: url(../img/bg.jpg) no-repeat;
/* background-size: cover; */
position: absolute;
left: -50px;
bottom: 22px;
}
/* ———登陆表单部分——— */
.login-form{
width: 346px;
/* height: 426px; */
position: absolute;
top: 20px;
right: -30px;
z-index: 4;
background: #fff;
overflow: visible;
}
/* 扫码登陆和账户登录选项 */
.login-tab{
height: 54px;
display: flex;
line-height: 54px;
text-align: center;
}
.login-tab div{
width: 50%;
border-bottom: 1px solid #f4f4f4;
}
.login-tab a{
font-size: 18px;
border-bottom: 1px solid #f4f4f4;
color: #666;
text-decoration: none;
}
.login-tab a:hover{
color: #e4393c;
font-weight: bold;
}
.login-tab-right a{
color: #e4393c;
font-weight: bold;
}
/* 中间主要表单部分 */
.login-box{
margin-top: 30px;
text-align: center;
position: relative;
}
.login-box-1,.login-box-2{
height: 38px;
width: 304px;
margin: 0 auto;
border: 1px solid #bdbdbd;
position: relative;
margin-bottom: 20px;
}
.login-box-1 label{
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 38px;
height: 38px;
border-right: 1px solid #bdbdbd;
background: url(../img/pwd-icons-new.png);
}
.login-box-2 label{
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 38px;
height: 38px;
border-right: 1px solid #bdbdbd;
background: url(../img/pwd-icons-new.png);
background-position: -48px 0;
}
/* 两个输入框 */
.itxt{
line-height: 18px;
height: 18px;
border: 0;
padding: 10px 0 10px 50px;
width: 254px;
float: none;
overflow: hidden;
font-size: 14px;
font-family: '\5b8b\4f53';
outline: none;
}
.login-box-3{
margin: 0 auto;
text-align: right;
height: 38px;
width: 304px;
}
.login-box-3 a{
font: 12px/150% Arial,Verdana,"\5b8b\4f53";
color: #666;
text-decoration: none;
}
.login-box-3 a:hover{
color: #e4393c;
text-decoration: underline;
}
.login-box-4{
margin: 0 auto;
border: 1px solid #e85356;
display: block;
width: 302px;
background: #e4393c;
height: 31px;
}
.login-box-4 a{
line-height: 31px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
/* ————表单底部———— */
.form-foot{
margin-top: 30px;
/* width: 100%; */
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-top: 1px solid #f4f4f4;
height: auto;
background-color: #fcfcfc;
display: flex;
position: relative;
}
.form-foot{
display: block;
}
.form-foot a:hover{
color: #e4393c;
text-decoration: underline;
}
.form-foot li{
list-style: none;
float: left;
display: list-item;
text-align: -webkit-match-parent;
}
.form-foot li:last-child{
float: right;
color: #b61d1d;
}
.form-foot li:last-child a{
float: right;
color: #b61d1d;
}
.form-foot li:last-child b{
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
background: url(/img/pwd-icons-new.png) -104px -75px no-repeat;
vertical-align: middle;
margin-right: 5px;
}
.line{
color: #ccc;
padding: 0 10px;
font-size: 12px;
}
.QQ-icon,.weixin-icon{
width: 19px;
height: 18px;
display: block;
background: url(../img/QQ-weixin.png) no-repeat;
margin: 0 auto;
position: absolute;
float: left;
left: 0;
top: 16px;
}
.weixin-icon{
background: url(../img/QQ-weixin.png) no-repeat;
background-position: -20px 0;
}
.form-foot a{
color: #666;
text-decoration: none;
font-size: 12px;
display: inline-block;
position: relative;
padding-left: 24px;
}
/* —————网页尾部————— */
#foot{
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
/* 尾部导航 */
.links{
color: #666;
font-size: 12px;
}
#foot a{
margin: 0 10px;
text-decoration: none;
color: #666666;
font-size: 12px;
}
#foot a:hover{
color: #e4393c;
text-decoration: underline;
}
/* 版权部分 */
.copyright{
margin: 10px 0;
font-size: 12px;
color: #666666;
}
本文来自博客园，作者：明金同学，转载请注明原文链接：https://www.cnblogs.com/vmuu/p/15663383.html
公众号：【明金同学】