DIV的功能就是把网页划分成逻辑块的。
看下豆瓣东西页面的布局，我们来分析下。
按照先从上到下的原则，把这个页面分成几个块：
首先是最顶端的这个条，这是一个DIV，我们给它起个名字，叫banner
然后是“一起聊聊那些”的那个广告条，这是一个DIV，给它起个名字，叫ad
再然后是中间的各种电商物品分类的一块，这是一个DIV，给它起个名字，叫hierarchy
最后是比较具体的某个物品的DIV，给它起个名字，叫goods
如果我们用html代码表示这几个部分的话就是这样的，
<div></div> <!--banner-->
<div></div> <!--ad-->
<div></div> <!--hierarchy-->
<div></div> <!--goods-->
以上是从上到下分析的布局，我们再从左到右分析一下，看到hierarchy那个div可以分为两个部分：
列表部分，我们给它起个名字叫hierarchy.left
右边的某个分类里面推荐的商品，我们给它起个名字叫hierarchy.right
所以上面的<div></div> <!--hierarchy-->得改一改了，
<div><!--hierarchy-->
<div></div><!--hierarchy.left-->
<div></div><!--hierarchy.right-->
</div>
同样的道理goods那个div也得改一改了，
<div><!--goods-->
<div></div><!--shoes-->
<div></div><!--sofa-->
<div></div><!--clock-->
<div>