大家学过html css JavaScript 以及轻量级框架jQuery和一些插件的使用即可，先看一下预览图
大家再看一下效果：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
<!--搜索关键词-->
<meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，mp3，相机，数码"/>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/注册页面.css"/>
<link rel="stylesheet" type="text/css" href="css/css初始化样式.css"/>
</head>
<body>
<!--头部区域-->
<header class="toubuquyu w">
<div class="logo">
<h1>
<a href="品优购.html">
</a>
</h1>
</div>
</header>
<!--导航栏部分-->
<nav class="w daohanglan">
<span>注册新会员</span>
<em>我有账号，去登陆</em>
</nav>
<!--主体部分-->
<section class="zhutibufen w">
<ul>
<li class="diyige">
<em>手机号：</em> <input type="number" name="" id="" value="" />
<i><img src="img/images/5648_03.png" alt="" /></i>
<b>手机号码格式不正确，请从新输入 </b>
</li>
<li class="dierge">
<em>短信验证码：</em> <input type="number" name="" id="" value="" />
<!--<i><img src="img/images/5648_03.png" alt="" /></i>
<b>手机号码格式不正确，请从新输入 </b>-->
</li>
<li class="disange">
<em>登录密码：</em> <input type="number" name="" id="" value="" />
<i><img src="img/images/5648_03.png" alt="" /></i>
<b>密码不少于6位数，请从新输入</b>
</li>
<li class="disige">
<string>安全程度</string> <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em>
</li>
<li class="diwuge">
<em>确认密码：</em> <input type="number" name="" id="" value="" />
<i><img src="img/images/5648_03.png" alt="" /></i>
<b>密码不一致，请从新输入 </b>
</li>
<li class="diliuge">
<input type="checkbox" name="" id="" value="" /> <em>同意协议并注册<a href="#">《知果果用户协议》</a></em>
</li>
<li class="diqige">
<div><a href="#">完成注册</a></div>
</li>
</ul>
</section>
<!--尾部部分-->
<footer class="weibubufen">
<div class="w zhongjianhezi">
<div class="shangbufenlogo">
<ul>
<li>
<em><img src="img/图层138.png"/></em>
<div class="大盒子">
<h2>正品保障</h2>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<em><img src="img/图层139.png"/></em>
<div class="大盒子">
<h2>极速物流</h2>
<p>急速物流，急速送达</p>
</div>
</li>
<li>
<em><img src="img/图层140.png"/></em>
<div class="大盒子">
<h2>无忧售后</h2>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<em><img src="img/图层141.png"/></em>
<div class="大盒子">
<h2>特色服务</h2>
<p>私人定制家电套餐</p>
</div>
</li>
<li>
<em><img src="img/图层142.png"/></em>
<div class="大盒子">
<h2>帮助中心</h2>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="zhongbufenjieshao">
<dl>
<dt>购物指南</dt>
<dd>夺宝岛</dd>
<dd>DIY装机</dd>
<dd>延保服务</dd>
<dd>品优购E卡</dd>
<dd>品优购通信</dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd>上门自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dd>配送费收取标准</dd>
<dd>海外配送</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
<dd>邮局汇款</dd>
<dd>公司转账</dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd>售后政策</dd>
<dd>价格保护</dd>
<dd>退款说明</dd>
<dd>返修/退换货</dd>
<dd>取消订单</dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><img src="img/多边形1拷贝.png" alt="" /></dd>
<dd>品优购客户端</dd>
</dl>
</div>
<div class="下半部分的">
<p class="diygnjkd">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p>
<p class="第二个">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
<p>京ICP备08001421号京公网安备110108007702</p>
</div>
</div>
</footer>
</body>
</html>
css:
.w{
width: 1200px;
margin: 0 auto;
}
/*头部区域*/
.toubuquyu{
position: relative;
height: 82px;
border-bottom: 2px solid #b1191a;
}
.toubuquyu .logo{
position: absolute;
top: -9px;
width: 178px;
height: 58px;
}
.toubuquyu .logo a{
display: block;
width: 178px;
height: 58px;
background-image: url(../img/logo.png);
}
/*导航栏部分*/
.daohanglan{
height: 41px;
background-color: #ececec;
margin-top: 20px;
}
.daohanglan span{
float: left;
display: inline-block;
margin: 8px 0px 11px 10px;
font-size: 18px;
color: #333333;
}
.daohanglan em{
float: right;
display: inline-block;
margin: 12px 10px 12px 0px;
font-size: 14px;
color: #333333;
}
/*主体部分*/
.zhutibufen{
position: relative ;
height: 479px;
border: 1px solid #ccc;
}
.zhutibufen input{
border: 1px solid #ccc;
width: 239px;
height: 34px;
}
.zhutibufen .diyige{
margin-top: 55px;
margin-left: 339px;
}
.zhutibufen ul li i{
margin-left: 10px;
}
.zhutibufen ul li b{
font-size: 12px;
color: #df3033;
font-weight: 400;
}
.zhutibufen ul li em{
font-size: 14px;
color: #4c4c4c;
text-align: right;
}
.zhutibufen .dierge{
margin-left: 310px;
margin-top: 20px;
}
.zhutibufen .disange{
margin-left: 324px;
margin-top: 20px;
}
.zhutibufen .diwuge{
margin-left: 324px;
margin-top: 20px;
}
.zhutibufen string{
display: inline-block;
margin-left: 478px;
margin-top: 10px;
font-size: 12px;
color: #b2b2b2;
}
.zhutibufen .ruo{
display: inline-block;
width: 34px;
height: 13px;
color: #fff;
background-color: #de1111;
line-height: 13px;
text-align: center;
font-size: 12px;
margin-right: -4px;
}
.zhutibufen .zhong{
display: inline-block;
width: 34px;
height: 13px;
color: #fff;
background-color: #40b83f;
line-height: 13px;
text-align: center;
font-size: 12px;
margin-right: -4px;
}
.zhutibufen .qiang{
display: inline-block;
width: 34px;
height: 13px;
color: #fff;
background-color: #f79100;
line-height: 13px;
text-align: center;
font-size: 12px;
}
.zhutibufen .diliuge input{
display: inline-block;
width: 14px;
height: 13px;
border: 2px solid #ccc;
margin-left: 397px;
margin-top: 40px;
vertical-align:bottom;
}
.zhutibufen .diliuge em{
display: inline-block;
font-size: 12px;
color: #4d4d4d;
}
.zhutibufen .diqige{
margin-top: 50px;
margin-left: 408px;
}
.zhutibufen .diqige div{
width: 200px;
height: 35px;
background-color: #c81623;
line-height: 35px;
text-align: center;
font-size: 14px;
color: #ffffff;
}
.zhutibufen .diqige div a{
font-size: 14px;
color: #ffffff;
}
/*尾部部分*/
.weibubufen{
height: 417px;
background-color: #f5f5f5;
margin-top: 38px;
}
.weibubufen .zhongjianhezi{
height: 417px;
/*background-color: #000;*/
}
.weibubufen .zhongjianhezi .shangbufenlogo{
height: 108px;
border-bottom:1px solid #ccc;
}
{
float: left;
}
.weibubufen .zhongjianhezi .shangbufenlogo ul li{
float: left;
width: 240px;
height: 108px;
}
.weibubufen .zhongjianhezi .shangbufenlogo ul li em{
margin-top: 30px;
margin-right: 5px;
margin-left: 35px;
float: left;
}
.weibubufen .zhongjianhezi .shangbufenlogo ul li h2{
padding-top: 36px;
font-size: 14px;
color: #333333;
/* float: left;*/
}
.weibubufen .zhongjianhezi .shangbufenlogo ul li p{
margin-top: 9px;
font-size: 12px;
color: #666666;
}
.weibubufen .zhongjianhezi .zhongbufenjieshao{
float: left;
/*background-color: purple;*/
width: 1200px;
height: 187px;
border-bottom: 1px solid #ccc;
}
.weibubufen .zhongjianhezi .zhongbufenjieshao dl{
margin-top: 22px;
margin-left: 50px;
margin-right: 72px;
float: left;
}
.weibubufen .zhongjianhezi .zhongbufenjieshao dl dt{
font-size: 16px;
color:#333333;
}
.weibubufen .zhongjianhezi .zhongbufenjieshao dl dd{
font-size: 12px;
color:#666666;
margin-top: 8px;
}
.下半部分的{
float: left;
width: 1200px;
height: 118px;
/*background-color: purple;*/
}
.下半部分的 p {
text-align: center;
font-size: 12px;
color: #666666;
}
.diygnjkd{
margin: 19px 0 16px 0;
}
.第二个{
margin: 0px 0 10px 0;
}