运用HTML和CSS制作聚美优品注册整体界面

聚美优品的界面一向很讨广大客户的喜爱，好看却不繁杂，下面大家看下本次将制作的界面

看到网页的第一件事就是想布局，如何把整个网页中各个元素进行包装分化。总体可以分为三个部分header、main和footer，总体再包在一个div下，其中header有两个部分：左边的图片和右边的三个超链接精灵图，main有两个部分：左边的大图片和右边的一个登录样式，footer总体来说是一个部分：一段其中包含少许超链接的文字和5个精灵图，制作网页前我们先大体的画出这个框架如下

搭建好制作思路框架后我们开始整理要用到的图片以及精灵图，可以从聚美优品网页中检视获得，如下

做好这些准备就可以开始编码，先看一下我具体的html和css的代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>聚美优品</title><link rel="stylesheet" type="text/css" href="css/new_file.css"/></head><body><center><div class="wapper"><div class="header"><div class="left_1"></div><div class="right_1"><ul><li><a href="#" class="li_a_1"></a></li><li><a href="#" class="li_a_2"></a></li><li><a href="#" class="li_a_3"></a></li></ul></div> </div>       <div class="main"><div class="left_2"><img src="img/signPic.jpg.png" /> </div><div class="right_2"><div class="main_txt"><h1 style="font-size: 20px;color: #e31256;font-family: "Microsoft YaHei", 微软雅黑, 黑体;">用户注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="txt_1">已有帐号</a><a class="txt_2" href="#">在此登录</a></h1><br /><br /><form method="get"><input type="text" class="text_1" placeholder="手机号"/><input type="text" class="text_2" placeholder="短信验证码"/><button class="button_1">获取短信验证码</button><input type="password" class="text_1" placeholder="密码"/><input type="password" class="text_1" placeholder="重复密码"/><br /><br /><button class="button_2">同意协议并注册</button></form><br><a class="txt_2" href="#">《聚美优品用户协会》</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="txt_2" href="#">《聚美隐私权政策》</a></div> </div>    </div>            <div class="footer"><div class="footer_1"><p>Copyright © 2010-2015 北京创锐文化传媒有限公司 Jumei.com 保留一切权利。客服热线：400-123-8888</p><p>京公网安备 11010102001226 号 | <a class="txt_3">京ICP证111033号</a>| 食品流通许可证 SP1101051110165515（1-1） | <a class="txt_3">营业执照</a>&nbsp;|&nbsp;<a class="txt_3">公示制度</a></p>                  </div>    <div><ul class="ul_2"><li><a href="#" class="li_a_4"></a></li><li><a href="#" class="li_a_5"></a></li><li><a href="#" class="li_a_6"></a></li><li><a href="#" class="li_a_7"></a></li><li><a href="#" class="li_a_8"></a></li></ul>                      </div></div>    </div>    </center></body>
</html>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;}
*{ font-size: 12px;font-family: Tahoma,Geneva,sans-serif;}.wapper{width:1000px ;height: 950px;}
.header{width:980px ;height: 100px;}
.left_1{margin-left: 80px;width:160px ;height: 100px;float: left;background-image: url(../img/logo_new_v1.jpg);
}
.right_1{width:400px ;height: 90px;float: right;}
ul li{float: left;width: 130px;height: 95px;line-height: 100px;list-style: none;
}
li a{display: inline-block;width: 108px;height: 35px;background-image: url(../img/header_corn_new_v2.png);
}
.li_a_1{width: 100px;height: 32px;background-position: -5px -1px;}
.li_a_2{width: 110px;height: 33px;background-position: -4px -33px;}.li_a_3{width: 110px;height: 33px;background-position: -0px -64px;
}.main{width:980px ;height: 600px;}
.left_2{float: left;width:520px ;height: 500px;padding-top: 100px;}
.right_2{float: right;width:450px ;height: 600px;
}
.main_txt{padding: 23px;margin-top: 50PX;width: 310px;height: 480PX;box-shadow: 0 0 4px rgba(0,0,0,0.75);text-align: left;}
.txt_1{color: #969696;
}
.txt_2,.txt_3{color: #ed145b;text-decoration: none;font-size: 12px;
}
.txt_2:hover,.txt_3:hover{text-decoration: underline;
}
.txt_3{color: black;
}
.text_1,.text_2{border: 1px solid #CFCFCF;vertical-align: middle;padding: 10px 8px;line-height: 1.5;font-size: 14px;height: auto;width: 284px;margin: 16px;margin-left: 0px;
}.text_2{width: 138px;
}
.txt_3{}
.button_1{background: linear-gradient(to bottom,#fcfcfc,#f2f2f2);border: 1px solid #d9d9d9;text-decoration: none;padding: 0 8px;display: inline-block;line-height: 41px;height: 41px;font-weight: 700;color: #666;text-align: center;width: 126px;
}
.button_2{display: inline-block;font-family: inherit;background: #F8296D;font-weight: 400;line-height: 40px;font-weight: 700;font-size: 14px;padding: 0 30px;height: 40px;color: #fff;border: 0;width: 303px;
}
.footer{width:980px ;height: 160px;
}
.footer{margin-top: 30px;padding: 14px 0 18px;line-height: 23px;
}
.ul_2{margin-left: 160px;
}.ul_2 li{margin: 5px;height: 60px;border-bottom: 1px solid black;border-bottom-color: gainsboro;
}
.li_a_4{background-position: -11px -106px;
}
.li_a_5{background-position: -11px -158px;
}
.li_a_6{background-position: -11px -212px;
}
.li_a_7{background-position: -12px -262px;
}
.li_a_8{width: 128px;height: 52px;background-position: 0px -301px;
}

首先设定一个整个项目的div以及各个地方的小div（建议做项目的时候先把盒子的边框先显出来方便去浏览，最后制作完再去掉边框即可），因为项目中的标签样式属性偏多，我们便运用css外部样式进行添加，在内容前把一些整体的样式先用选择器改变整体所需的属性，同样在心中构思好后面相同属性的样式的字体或者超链接等，以免代码不必要的重复

header中的内容

先看看header中的代码如下

         <div class="header"><div class="left_1"></div><div class="right_1"><ul><li><a href="#" class="li_a_1"></a></li><li><a href="#" class="li_a_2"></a></li><li><a href="#" class="li_a_3"></a></li></ul></div> </div>

.header{width:980px ;height: 100px;}
.left_1{margin-left: 80px;width:160px ;height: 100px;float: left;background-image: url(../img/logo_new_v1.jpg);
}
.right_1{width:400px ;height: 90px;float: right;}
ul li{float: left;width: 130px;height: 95px;line-height: 100px;list-style: none;
}
li a{display: inline-block;width: 108px;height: 35px;background-image: url(../img/header_corn_new_v2.png);
}
.li_a_1{width: 100px;height: 32px;background-position: -5px -1px;}
.li_a_2{width: 110px;height: 33px;background-position: -4px -33px;}.li_a_3{width: 110px;height: 33px;background-position: -0px -64px;
}

如框架图所示一样，左边框放入了背景图，当然也可以直接放图片，右边框放入了一个表格，运用浮动把右边的边框浮在右边，里面的表格也运用了浮动的方法将表格浮在右框里成一排，具体的大小可以在检视图中查看，在表格中扣出精灵图作为背景，因为后面在footer中也要从中扣出精灵图，运用后代选择器直接给所有的要扣精灵图的a标签赋予想同的属性，具体的单个需要改动的再用class修改

main中的内容

先看下具体的代码如下

     <div class="main"><div class="left_2"><img src="img/signPic.jpg.png" /> </div><div class="right_2"><div class="main_txt"><h1 style="font-size: 20px;color: #e31256;font-family: "Microsoft YaHei", 微软雅黑, 黑体;">用户注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="txt_1">已有帐号</a><a class="txt_2" href="#">在此登录</a></h1><br /><br /><form method="get"><input type="text" class="text_1" placeholder="手机号"/><input type="text" class="text_2" placeholder="短信验证码"/><button class="button_1">获取短信验证码</button><input type="password" class="text_1" placeholder="密码"/><input type="password" class="text_1" placeholder="重复密码"/><br /><br /><button class="button_2">同意协议并注册</button></form><br><a class="txt_2" href="#">《聚美优品用户协会》</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="txt_2" href="#">《聚美隐私权政策》</a></div> </div>    </div>

.main{width:980px ;height: 600px;}
.left_2{float: left;width:520px ;height: 500px;padding-top: 100px;}
.right_2{float: right;width:450px ;height: 600px;
}
.main_txt{padding: 23px;margin-top: 50PX;width: 310px;height: 480PX;box-shadow: 0 0 4px rgba(0,0,0,0.75);text-align: left;}
.txt_1{color: #969696;
}
.txt_2,.txt_3{color: #ed145b;text-decoration: none;font-size: 12px;
}
.txt_2:hover,.txt_3:hover{text-decoration: underline;
}
.txt_3{color: black;
}
.text_1,.text_2{border: 1px solid #CFCFCF;vertical-align: middle;padding: 10px 8px;line-height: 1.5;font-size: 14px;height: auto;width: 284px;margin: 16px;margin-left: 0px;
}.text_2{width: 138px;
}
.txt_3{}
.button_1{background: linear-gradient(to bottom,#fcfcfc,#f2f2f2);border: 1px solid #d9d9d9;text-decoration: none;padding: 0 8px;display: inline-block;line-height: 41px;height: 41px;font-weight: 700;color: #666;text-align: center;width: 126px;
}
.button_2{display: inline-block;font-family: inherit;background: #F8296D;font-weight: 400;line-height: 40px;font-weight: 700;font-size: 14px;padding: 0 30px;height: 40px;color: #fff;border: 0;width: 303px;
}

同样在main中也是两个框浮动左和右，左边里面一个常规的图片自己稍作修改padding改改图片布局，右边是一个注册登记表，先套入一个盒子改变它的外框注意要虚化，然后再里面应用一系列的input样式以及button样式填入其中的，具体的修改可以参看代码，值得注意的是里面的有的文字有超链接以及鼠标碰后有下划线，需要用伪类选择器hover来改它们的属性

footer中的内容

最后是foot的中的内容，代码如下

<div class="footer"><div class="footer_1"><p>Copyright © 2010-2015 北京创锐文化传媒有限公司 Jumei.com 保留一切权利。客服热线：400-123-8888</p><p>京公网安备 11010102001226 号 | <a class="txt_3">京ICP证111033号</a>| 食品流通许可证 SP1101051110165515（1-1） | <a class="txt_3">营业执照</a>&nbsp;|&nbsp;<a class="txt_3">公示制度</a></p>                   </div>    <div><ul class="ul_2"><li><a href="#" class="li_a_4"></a></li><li><a href="#" class="li_a_5"></a></li><li><a href="#" class="li_a_6"></a></li><li><a href="#" class="li_a_7"></a></li><li><a href="#" class="li_a_8"></a></li></ul>                      </div></div>

.footer{width:980px ;height: 160px;
}
.footer{margin-top: 30px;padding: 14px 0 18px;line-height: 23px;
}
.ul_2{margin-left: 160px;
}.ul_2 li{margin: 5px;height: 60px;border-bottom: 1px solid black;border-bottom-color: gainsboro;
}
.li_a_4{background-position: -11px -106px;
}
.li_a_5{background-position: -11px -158px;
}
.li_a_6{background-position: -11px -212px;
}
.li_a_7{background-position: -12px -262px;
}
.li_a_8{width: 128px;height: 52px;background-position: 0px -301px;
}

在footer中分为两排，当然不用包两个div，文字是来两居中的一排文字其中有前面一样的具有超链接和鼠标触碰效果的文字，把它们加入到上面的选择器中，然后改变颜色即可，第二排是居中的5个精灵图其中有下划线，同样像上面的精灵图一样，放在表格中然后浮动成一排，并把下边框调出颜色具体修改间距大小

制作完成

完成效果如下

结束时把利于浏览的边框去掉，总的细节参考代码，有很多样式属性需要自己去检视，做的时候可以多看看官方的网页。这次制作希望能你起到好的帮助和学习。

end