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

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

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

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

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

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

因此我们可以继续把当中的内容划分为一整个区域，所以结合上面的分析；我们最终得出的大体的布局应该是:

        黑色线代表的是整个页面，即body标签的范围；而红色的线代表的就是我们整个中间内部区域的范围，这样划分布局之后；整个大的框架就已经搭建完成，接下来我们从内容的上部区域看，是两部分内容横向排列的；分别是一个logo以及几个超链接。因此我们可以将上部区域划分为两部分，分别是logo区域以及头部链接区域；对于不能并排的问题我们需要使用浮动来帮助我们布局，关于浮动在我的上一篇文章中有介绍：这里就不再赘述了，我们使用浮动将logo左浮；将头部链接右浮然后适当的调整间距即可。头部的完成之后，按照先上后下的原则 我们队中间内容区域进行划分。

      按照我的思路中间的内部区域可以分为左边的广告部分 以及右边的表单注册部分。左边的广告部分没什么好说的 使用img标签即可 但对于右边的表单部分我们又需要将其划分成几个部分 ；我们可以看出右边表单部分的左右以及上下间距都是相等的。因此我们需要设置设置父元素的内边距相同即可达到对齐的效果 。上面的用户注册使用h3标签来实现,右边的文字部分 在span元素中嵌套一个a标签即可；实现这种左右布局 也是通过浮动来完成。设置标题标签左浮 span元素右浮即可，中间的表格区域 input输入框的宽度和表单的父级元素同宽 除了短信验证码和后面的按钮需要单独设置宽高之外  ；对于短信验证码和后面的button可能会有同学第一时间想到这里可以使用浮动来进行布局。对于这样想的同学，可要好好的反省下自己有没有理解块级元素 行内元素以及行内块元素（替代元素）的区别了，在这里我们的input标签是行内块元素并且其边距没有超过100px(敲黑板：我们设置的元素之间的边距一般情况下不会超过100px，除非一些特殊情况；需要设置超过100px)所以我们只需要让输入框和按钮的宽度进行设置即可，使校验码的输入框和按钮在一行排列。结构如下：

   讲完上面的布局，我们来说说底部的布局；底部的布局主要是在底部div中；将其中的内容设置为text-aligin；底部第一二行的文本使用P标签实现即可。代表两个段落，下面的背景图片主要是使用了4个li列表项中嵌套a标签；设置a标签的background-image即可实现。

  需要注意的是：在底部和上部的链接图片我们使用的是一张整图，只不过是使用了背景图片定位；从而达到了让一张图片显示出不同的效果来。这样做有两个好处，第一个：我们的浏览器在请求网页资源时，会将请求到的资源进行缓存以方便下一次使用；另外我们使用一张背景图片只需要在最开始加载一次图片资源即可达到效果，而不用多次发送网络请求；节省了网络流量提高了用户的体验；背景图片定位一般用在非内容区域——即当图片不作为网页主体内容一部分的时候我们就可以使用背景图。否则还是需要使用img标签来加载图片，达到web标签语义化的效果。

最后放上源码实现的链接地址：https://github.com/shengbeer/Study/tree/master/jumeiRegister