HTMl+CSS 模仿京东网登录页面

迷南。 2022-12-27 11:23 234阅读 0赞

> 课后实践项目，仅页面效果，写博客纯属记录！

码云开源仓库地址：[https://gitee.com/ynavc/jd][https_gitee.com_ynavc_jd]

演示地址：[https://ynavc.gitee.io/jd][https_ynavc.gitee.io_jd]

## 效果图： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

## 实现代码： ##

### 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 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_gitee.com_ynavc_jd]: https://gitee.com/ynavc/jd
[https_ynavc.gitee.io_jd]: https://ynavc.gitee.io/jd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221120/d831869abb0f4aab92c0c169f5f547bf.png