安利首页制作

我们今天做一下这个安利的首页部分，参考图就是下图：

1. 网页概念：

凡是以后看见下面这样的网页，有几个概念需要知道：

 由于屏幕分辨率不一样，所以很多网站的设计都会把中间一部分内容给完整的保留下来，左右两边会留白，如上图所示，黑框框住的是中间部分，中间部分叫：版心，占满全屏的叫：通栏。

例如京东的网站：

 京东的网站就是这样，中间部分是版心，两边是留白，当网页放大，留白部分会变大，这个时候我们要实现中间是版心的问题，可以使用：margin：0  auto；这个属性来实现。

2.代码思路介绍

我们看安利的首页，可以分为五个部分做，如下图这五个部分，也就是创建五个盒子，一般盒子都是用div标签的，这五个部分分别是：header（头部）、nav（导航栏）、banner（横幅）、list（列表）、footer（底部）

 所以代码这样写：

 先把五个部分写在五个div盒子里面，再来进行下面的操作。