京东登录页

程序代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#_head{
				margin: 0px 0px 0px 100px;
				height: 60px;
			}
			#_head img{
				float:left;
			}
			#_head h1{
				margin: 40px 0 0 10px;
				height: 20px;
				font: 20px "微软雅黑" ;
				float:left;
			}
			#_body{
				margin: 40px 5px 20px ;
				padding: 80px ;
				background-image: url(img/banner.png) ;
				background-repeat: no-repeat;
				overflow: hidden;
			}
			#body_reg{
				height: 250px;
				width: 300px;
				background-color: white;
				margin: 0px 500px;
				overflow: hidden;
			}
			#body_reg h1{
				margin: 10px 0 0 20px;
				height: 18px;
				font: 18px "微软雅黑" ;
				float:left;
			}
			#zhuce{
				margin: 13px 20px 0 20px;
				padding: 0px 0 0 20px ;
				height: 20px;
				color: #e4393b;
				font: 15px "微软雅黑" ;
				text-decoration: none;
				background: url(img/icon5.jpg) 0px 3px no-repeat;
				float: right;
			}
			#_form{
				padding: 0px 20px ;
				width: 300px;
				margin: 50px 0px 0 0px;
				overflow: hidden;
			}
			._from{
				height: 40px;
				margin-bottom:20px;
				overflow: hidden;
			}
			#username{
				background: url(img/icon1.jpg); 
				display: inline-block; 
				width: 38px; 
				height: 38px; 
				border: 1px solid  darkgray;  
				border-right: none;
				float: left;
			}
			#name{
				height: 38px;
				width: 220px;
				padding: 0px;
				border-right: none; 
				border: 1px solid gray;
				float: left;
			}
			#userpws{
				background: url(img/icon2.jpg); 
				display: inline-block; 
				width: 38px; 
				height: 38px; 
				border: 1px solid  darkgray;  
				border-right: none;
				float: left;
			}
			#pws{
				height: 38px;
				width: 220px;
				padding: 0px;
				border-right: none; 
				border: 1px solid gray;
				float: left;
			}
			#auto{
				font-size: 0px;
				height: 25px;
				vertical-align:middle; 
				float: left;
			}
			#into label{
				font-size:12px;
				vertical-align:middle;
			}
			#into a{
				margin: 0px 40px 0px 0px;
				height: 20px;
				color: #000000;
				font: 15px "微软雅黑" ;
				text-decoration: none;
				float: right;
			}
			#put{
				margin: 15px -10px;
				border: none;
				background-color: #E4393B;
				color: white;
				font: 15px "微软雅黑" ;
				height: 30px;
				width: 260px;
			}
			#link{
				margin: 20px 80px;
				color: #827981;
			}
			#link a{
				font-size: 10px  ;
				margin: 0px 10px;
				color: #827981;
				text-decoration: none;
			}
			#copy{
				font-size: 10px  ;
				margin: 20px 390px;
				color: #827981;
			}
		</style>
	</head>
	<body>
		<div id="_body_">
			<div id="_head">
				<img src="img/jingdo_logo.png" />
				<h1>欢迎登录</h1>
			</div>
			<div id="_body">
				<div id="body_reg">
					<h1>京东会员</h1>
					<a href="#" id="zhuce">立即注册</a>
					<div id="_form">
						<form action="#" method="post" >
							<div class="_from">
								<span id="username" ></span>
								<input type="text" id="name" name="name" placeholder="邮箱/用户名/已验证手机"/>
							</div>
							<div  class="_from">
								<span id="userpws"></span>
								<input type="password" id="pws" name="psw"/>
							</div>
						    <div id="into">
								<input type="checkbox" name="auto" id="auto"/>
								<label for="auto">自动登录</label>
								<a href="#">忘记密码?</a>
							</div>
							<input type="submit" id="put" value="提交">
						</form>
					</div>
				</div>
			</div>
			<div id="link">
			    <a href="#">关于我们</a>|
			    <a href="#">联系我们</a>|
			    <a href="#">人才招聘</a>|
			    <a href="#">商家入驻</a>|
			    <a href="#">广告服务</a>|
			    <a href="#">手机京东</a>|
			    <a href="#">友情链接</a>|
			    <a href="#">销售联盟</a>|
			    <a href="#">京东社区</a>|
			    <a href="#">京东公益</a>|
			    <a href="#">English Site</a>
			</div>
			<div id="copy">Copyright©2004-2017 京东JD.com 版权所有</div>
		</div>
	</body>
</html>

完成效果

在这里插入图片描述

Logo

电商企业物流数字化转型必备!快递鸟 API 接口,72 小时快速完成物流系统集成。全流程实战1V1指导,营造开放的API技术生态圈。

更多推荐