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

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

演示地址：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&nbsp;&nbsp;2004-2020&nbsp;&nbsp;京东JD.com&nbsp;版权所有

				 </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;

}

HTMl+CSS 模仿京东网登录页面的更多相关文章

微信小程序相关一、模仿京东静态登录页面
一.培训的第一天,基本上没有什么最新的东西,但是看到老师的代码收获的确实是不少. 1.1.首页代码很简洁,将共有的样式都提取的很好. 1.2.其次是每一个小块写样式的时候用到了好多子代选择器和后代选择 ...
HTML模仿实现京东登录页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
如何利用CSS选择器抓取京东网商品信息
前几天小编分别利用Python正则表达式.BeautifulSoup.Xpath分别爬取了京东网商品信息,今天小编利用CSS选择器来为大家展示一下如何实现京东商品信息的精准匹配~~ CSS选择器目前 ...
原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
HTML5实战教程———开发一个简单漂亮的登录页面
最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...
[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
ElasticSearch7.X.X-初见-模仿京东搜索的实战
目录简介聊聊Doug Cutting ES&Solr&Lucene ES的安装安装可视化界面ES head插件了解ELK 安装Kibana ES核心概念文档类型索引倒排 ...
解决使用IE8打开ADFS 3.0登录页面
系统上线前一天,发现客户竟然有XP系统和2003系统,这些系统都不能访问外网.测试时,客户端是IE8,打开我们系统ADFS的登录页面,一直在Loading,无法打开,也不报错.后来通过fiddler跟 ...

随机推荐

IntentFilter，PendingIntent
1.当Intent在组件间传递时,组件如果想告知Android系统自己能够响应那些Intent,那么就需要用到IntentFilter对象. IntentFilter对象负责过滤掉组件无法响应和处理的 ...
OC简单介绍
一.OC与C的对比关键字 OC新增的关键字在使用时,注意部分关键字以"@"开头方法->函数定义与实现数据类型新增:BOOL/NSObject/id/SEL/bloc ...
【编程思想】【设计模式】【创建模式creational】抽象工厂模式abstract_factory
Python版 https://github.com/faif/python-patterns/blob/master/creational/abstract_factory.py #!/usr/bi ...
supervise安装与使用
确认当前是否已经安装which supervise/usr/local/bin/supervise 软件下载安装-------------------------------------------- ...
Spring Batch Event Listeners
Learn to create and configure Spring batch's JobExecutionListener (before and after job), StepExecut ...
【C/C++】C++ warning： control reaches end of non-void function return
控制到达非void函数的结尾. 一些本应带有返回值的函内数到容达结尾后可能并没有返回任何值. 这时候,最好检查一下是否每个控制流都会有返回值. 我是ostream声明的时候没有写return out; ...
java多线程5：线程间的通信
在多线程系统中,彼此之间的通信协作非常重要,下面来聊聊线程间通信的几种方式. wait/notify 想像一个场景,A.B两个线程操作一个共享List对象,A对List进行add操作,B线程等待Lis ...
基于bootstrap的模态框使用
使用步骤两步 1:按顺序引入以下三个文件 <link rel="stylesheet" href="../css/bootstrap.min.css"&g ...
.NET Core工程应用系列(1) 定制化Audit.NET实现自定义AuditTarget
需求背景最近在项目上需要增加对用户操作进行审计日志记录的功能,调研了一圈,在.net core生态里,用的最多的是Audit.NET.浏览完这个库的文档后,觉得大致能满足我们的诉求,于是建立一个控制 ...
CF151B Phone Numbers 题解
Content 在一座城市中,每个人的电话号码都是由六位整数组成的,例如 11-45-14. 现在有 \(n\) 个人,第 \(i\) 个人有 \(s_i\) 个人的电话号码.已知: 出租车司机的电话 ...

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

效果图：

实现代码：

HTML：

CSS：

HTMl+CSS 模仿京东网登录页面的更多相关文章

随机推荐

热门专题