前端学习之路-聚美优品注册页面的实现

今天主要的学习是按照要求实现一个聚美优品的注册页面；其中主要用到的是div+css以及浮动来进行布局，还用到了一些特性；如使用背景图片定位，通过应用background-position来设置背景图片的定位。

对于一个页面我们看到的，首先是要分析这个页面的布局是怎样完成；一般我们使用div+CSS来完成页面的布局。常见的布局方式有两栏式。还有三栏式布局。下面放上聚美优品效果完成图：

下面 我通过一系列图片详细讲解一下，对于这个注册页面的布局以及我的思路

当我们拿到一个原型图，一般是设计师通过PS切好的PSD图；我们首先需要做的就是思考这个页面的布局应该怎样通过CSS来进行布局；下面开始讲述一下我的思路；当我拿到这个原型图的时候，我们发现这是一个注册页面；对于这种注册页面我们一般可以从先上后下 先左后右 先大后小的原则来进行分析；首先我们按照先上后下的原则分析发现整体内容区域有三部分分别是导航栏也称(头部) 中间内容区域以及尾部，具体结构图片如下：

按照从上到下的原则分析完之后，我们按照从左到右的原则进行分析；首先我们应该看得出来所有的内容区域都不是占满整个屏幕的。因此我们可以认为中间的内容区域是居中的；因此我们用一个div将所有的内容包裹进去包括头部，