前端学习笔记2017.6.12 DIV布局网页

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>