京东登录注册页面的简单实现——（仿）

最新推荐文章于 2024-06-11 20:32:56 发布

Lucky_ze

最新推荐文章于 2024-06-11 20:32:56 发布

阅读量1w

点赞数 11

分类专栏：练习文章标签： HTML css 前端网页

本文链接：https://blog.csdn.net/Lucky_ze/article/details/87200510

版权

京东登录界面的简单实现——（仿）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东登录页</title>
		<!--<link rel="stylesheet" href="css/login.css"/>-->
		<style>
			header,section,article,figure{
	display: block;
}
*,html,body{
	padding: 0;
	margin: 0;
}
body,p,ul,li,span,i,strong,input,textarea{
	font-size: 14px;
	font-family: "微软雅黑";
	font-style: normal;
	padding: 0;
	margin: 0;
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
	font-size: 14px;
}
a{
	text-decoration: none;
	color: #000;
}
ul,li{
	list-style: none;
	padding: 0;
	margin: 0;
}
header{
	width: 980px;
	margin: 0 auto ;
	/*border: 1px #off solid;*/
	height: 108px;
	position: relative;
}
.logo{padding-top:15px ;}
.logo img{margin-right: 10px;}
header > article a{
	
	position: absolute;
	right: 0;
	top:50px;
	font-size: 12px;
}
header a img{ vertical-align:middle; padding-right: 5px;}
header a:hover{ 
	text-decoration: 
	underline; color: #f00;
	}
header article a{
	font-family: "宋体";
	font-size: 12px;
	color: #999;
}	
mark{
	width:100%;
	height: 37px;
	background: #fff8f0;
	text-align: center;
	line-height: 37px;
	font-family: "宋体";
	font-size: 12px;
	color: #999;
	display: block;
}
.content{
	position: relative;
	background:#dd2e12;/*中间大背景*/
	height: 477px;
}
.wrap{/*中间图片背景*/
	width: 378px;
	margin: 0 auto;
	background:url(img/5b03c9d2Na9f7af36.jpg)no-repeat left center;
	height: 477px;
	padding-left: 622px;
}
.formgorup{	/*右侧白背景*/
	position: relative;
	overflow: visible;
	bottom: 465px;
	left: 1000px;
	background: #fff;
	width: 346px;
	height: 400px;
}
.formgorup mark{
	height: 38px;
	text-align: center;
	display: block;
	line-height: 35px;
	background: #fff8f0;
	font-family: "宋体";
	font-size: 12px;	
}
.formgorup mark img{	
	vertical-align: middle;
	padding-right: 5px;
}
section mark{
	background: #DD2E12;	
	font-family: "宋体";
	font-size: 12px;
	color: #999;
}
form img{
	align-self: auto;
	width: 38.67px;
	height: 38px;
}
#bz{
	
	width: 173px;
	height: 56px;	
	float: left;
	border-bottom:#f4f4f4 solid 1px ;	
}
#bz a:hover{
	font-family:"微软雅黑";
	font-weight: bolder;
	color:#E4393C;	
}
p{
	/*width: 173px;
	height: 18px;*/
	margin-top: 16px;
	font-size: 18px;		
}
.o{
	color: #696969;
}
.q{	
	text-align: center;
	border-right: #f4f4f4 solid 1px;	
}
#by{
	width: 173px;
	height: 56px;
	float: left;
	text-align: center;
	border-bottom:#f4f4f4 solid 1px ;		
}
#by a:hover{
	font-family:"微软雅黑";
	font-weight: bolder;
	color:#E4393C;	
}
.mid{
	position:absolute;
	top: 94px;
	width: 304px;
	height: 255px;
	margin-left: 20px;	
}
.midtop{
	position: absolute;
	top:33px;
	width: 302px;
	height: 38px;
	border: #999999 solid 1px;	
}
.Uphoto img{
	border-right: #999999 solid 1px;
}
.longname input{
	position: absolute;
	left:50px;
	top:0px;
	width: 250px;
	height: 38.3px;
	border:none;
	font-family:"宋体";
	font-size: 16px;
	color: gray;
}
.midunder{
	position: absolute;
	top:92px;
	width: 302px;
	height: 38px;
	border: #999999 solid 1px;
}
.Pphoto img{
	border-right: #999999 solid 1px;
}
.password input{
	position: absolute;
	left: 50px;
	top: 0.5px;
	width: 250px;
	height: 37px;
	border: none;
	font-family: "宋体";
	font-size: 16px;
	color: gray;
}
.midsmall{
	position: absolute;
	top:151px;
	width: 302px;
	height: 18px;
	color: dimgrey;	
	text-align: right;
	font-family: "宋体";
}
.midsmall p{
	position: absolute;
	left:250px;
	bottom: 2px;
	color: dimgrey;	
	text-align: right;
	font-size: 12px;
	font-family: "宋体";
}
.midsmall a:hover{
	color:#dd2e12;
	text-decoration: underline;
}
/*.midbtn{
	position: absolute;
	top:180px;
	width: 302px;
	height: 36px;
	background: #DD2E12;
}*/
.sf{
	position: absolute;
	top:349px;
	background: #fcfcfc;
	width: 346px;
	height: 51px;
	border-top:#f4f4f4 solid 1px ;	
}
.foot{
	width: 302px;
	height: 51px;	
	margin:0 auto;
}
.qq_icon{
	position: absolute;
	left: 20px;
	top:15px;	
}
.qq_icon img{
	width: 19px;
	height: 18px;
}
.qq p{
	width:35px;
	margin-left: 20px;
	font-family: "微软雅黑";
	font-size:11px;
	color:dimgrey;
	border-right: darkgray solid 1px;
}
.qq a:hover{
	color:#dd2e12;
	text-decoration: underline;
}
.wechat img{
	position: absolute;
	left: 90px;
	top:15px;	
	width: 19px;
	height: 18px;
}
.wx p{
	position: absolute;
	left: 115px;
	bottom:20px;
	color:dimgrey;
	font-family: "宋体";
	font-size:11px;
	color: dimgrey;
}
.wx a:hover{
	color:#dd2e12;
	text-decoration: underline;
}
.zc_p img{
	position: absolute;
	right: 80px;
	top:18px;
	width: 16px;
	height: 16px;
}
.zc p{
	position: absolute;
	right:22px ;
	bottom:16px;
	font-size:14px;
	color:#dd2e12;
	font-family: "宋体";
}
.zc a:hover{
	color:#dd2e12;
	text-decoration: underline;
}
.midbtn input{
	width: 304px;
	height: 36p

最低0.47元/天解锁文章

Lucky_ze

关注

11
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
京东登录注册页面的简单实现——（仿）

京东登录界面的简单实现——（仿）&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;京东登录页&lt;/title&gt; &lt;!--&lt;link rel="stylesheet" href="cs
复制链接

扫一扫