搞一个yyds的京东登录页面

此次做的网页可以简单的分为上中下三个部分。

一．上部，也就是我们常说的头部，用来放一些logo及一些表示欢迎的术语，效果图及HTML代码和css代码如下。

效果图：

HTML代码：

<header class="wrap">
			<!-- 创建一个div盒子把头部内容包起来 -->
			<div class="logo-box">
				<!-- 放入头部京东logo -->
				<h1 class="left">
					<a href=""><img src="image/logo.png" alt="LOGO" /></a>
				</h1>
				<span class="left logo-r">欢迎登录</span>
			</div>
		</header>

Css代码：

/* 全局去除内外边距 */
*{padding:0;margin:0;}
/* 设置超链接去除下划线并改变颜色 */
a{text-decoration:none;color:#666;}
/* 鼠标移动到超链接时添加下划线并改变颜色 */
a:hover{text-decoration:underline;color:#b61d1d;}
/* 全局设置文字大小和行距，并改变颜色 */
body,html{font:12px/1.5 "微软雅黑",Arial;color:#666;}
/* 给内容总体设置一个宽度并居中，以适应大部分浏览器 */
.wrap{width:990px;margin:0 auto;}
/* 快捷类名设置:左浮动 */
.left{float:left;}
/* 快捷类名设置:右浮动 */
.right{float:right;}
/* 以上为通用设置 */

/* 给头部logo盒子创建一个高度并加入上内边距以适应图片和文字 */
.logo-box{
	height:60px;
	padding-top:10px;
}
/* 设置头部右侧的文字，调整字体大小和位置 */
.logo-r{
	font-size:24px;
	padding-left:20px;
	margin-top:10px;
}

二．中部放一张大的背景图片，并加入登录功能。 效果图及HTML代码和css代码如下：

效果图：

HTML代码：

<article class="content">
			
			<div class="wrap">
				<!-- 创建中部内容的大盒子，放入背景图片和登录表单 -->
				<div class="login-box">
					<div class="login-form">
						<h2>京东会员<a href="">立即注册</a></h2>
						<!-- 创建一个form表单，用于实现相关功能 -->
						<form action="" method="post" id="loginForm">
							<div class="item">
								<label class="nick left"></label>
								<input type="text" name="nick" placeholder="邮箱/用户名/已验证手机" />
							</div>
							<div class="item">
								<label class="psw left"></label>
								<input type="password" name="psw" />
							</div>
							<div class="item2">
								<input type="checkbox" name="auto" id="auto" />
								<label for="auto">自动登录</label>
								<a href="">忘记密码?</a>
							</div>
							<a href="" class="login-btn">登 录</a>
						</form>
					</div>
				</div>
			</div>
		</article>

css代码（中部大盒子）：

/* 设置中部盒子的背景颜色，再加一点上外边距，和头部保持一点距离 */
.content{
	background:#e93854;
	margin-top:15px;
}
/* 给中部盒子的中部盒子插入背景图片 */
.login-box{
	height:475px;
	background:url(../image/banner.png) no-repeat left top;
}

css代码（表单）：

/* 给表单整体部分设置浮动并调整位置,使其居于右侧 */
.login-form{
	float:right;
	margin-top:40px;
	width:306px;
	padding:20px;
	background:#fff;
}
/* 设置表单里的标题 */
.login-form h2{
	font-weight:normal;
	font-size:20px;
	height:27px;
	margin-bottom:25px;
}
/* 设置表单的标题里的超链接"立即注册" */
.login-form h2 a{
	font-size:14px;
	color:#b61d1d;
	padding-left:21px;
	line-height:29px;
	float:right;
	background:url(../image/icon5.jpg) 0 center no-repeat ;
}
/* 设置表单输入框整体 */
.login-form .item{
	height:38px;
	margin-bottom:20px;
	border:1px #bdbdbd solid;
}
/* 设置表单文本框 */
.item input{
	float:left;
	border:0 none;
	padding:10px 0 10px 10px;
	font-size:14px;
	line-height:18px;
	width:255px;
	color:#999;
}
/* 设置一个宽高以备插入背景图片 */
.item label{
	border-right:1px #bdbdbd solid;
	width:38px;
	height:38px;
}
/* 插入用户名左边的背景图片 */
.item .nick{
	background:url(../image/icon1.jpg) no-repeat;
}
/* 插入密码框左边的背景图片 */
.item .psw{
	background:url(../image/icon2.jpg) no-repeat;
}

.item2{
	font-size:0;/* 去掉一些间隙 */
	margin-bottom:15px;
}
.item2 label{
	font-size:12px;
	vertical-align:middle;
}
.item2 input{
	vertical-align:middle;
	margin-right:3px;
}
.item2 a{
	float:right;
	font-size:12px;
}
.login-btn{
	display:block;
	height:35px;
	line-height:35px;
	text-align:center;
	color:#fff;
	background:#e4393c;
	font-size:18px;
}
.login-btn:hover{
	color:#fff;
	text-decoration:none;
}

三：下部放的是一些导航超链接和版权信息： 效果图及HTML代码和css代码如下：

效果图：

HTML代码：

<footer class="wrap footer">
			<!-- 创建一个div盒子放入底部的超链接 -->
			<div class="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盒子放入版权信息模块 -->
			<div class="copy">Copyright©2004-2017 京东JD.com 版权所有</div>
		</footer>

css代码：

.footer{
	text-align:center;
	margin-top:20px;
	padding-bottom:30px;
}
/* 设置超链接的左右外边距使其分开 */
.link a{
	margin:0 10px;
}
/* 版权信息模块的上外边距 */
.copy{
	margin-top:8px;
}