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>

最新文章

1. USACO1.1Broken Necklace[环状DP作死]
2. How to choose the number of topics/partitions in a Kafka cluster?
3. 解决ASP.NET在IE10中Session丢失问题【转】
4. iOS中Git的使用
5. PostMessage和SendMessage的区别
6. 寒假学干货之------初步布局Layout
7. python 分支语句 循环语句
8. 小白学Maven第一篇配置
9. 41.Linux应用调试-修改内核来打印用户态的oops
10. c# 实现mysql事务
11. 「汇编」加深理解段地址*10H（*16）必须是16的倍数
12. pygame-KidsCanCode系列jumpy-part14-背景音乐及音效
13. C#文件流的读写
14. Delphi XE5 for Android （九）
15. sudo中的 各类授权 名称包含的操作 权限命令?
16. SAP业务蓝图设计的一些想法
17. 阿里云rds 备份和还原
18. redis scan迭代模糊匹配
19. yii使用gii创建后台模块与widget使用
20. Hive的介绍及安装

热门文章

1. SOLID
2. redis有序集合的使用
3. Python函数-map()
4. 谈谈Linux内核驱动的coding style
5. 修改windows文件的换行符
6. es5中foreach的用法
7. VirtualBox-Debian7.2-share
8. case编写的httpd简单启停脚本
9. Java 字符串和时间互相转化 +时间戳
10. (转)NHibernate各种数据库配置写法