网页div-css布局基础篇

平时我们所看到的网页都是有以下几个元素组成的：
1、顶部部分：其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分：网页主体内容；
3、侧边栏部分：包括网站文章更新，链接等；
4、底部部分：包括一些版权信息和全站链接.
为了设计的简便和多样化，一般的网页都要用到div-css进行布局编排，针对这些部分，可以列出网页内容的div-css结构图：
　　│body {}　/*这是一个HTML元素，代表html代码中的主题显示部分*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/
下面我们进一步解释这个结构图各个元素的意义：
这些div-css格式都是放置在网页html代码的标签中的；
“#”这个标记是html代码中对div-css“类”的表示，还有一个标记是“.”，这两个的区别是“#”一般是专一针对的类别，一个#+名称就是一个独一无二的ID，只可以对部分进行归属，“.”+名称是可以反复使用的，知道了这这些，我们就很容易理解以上结构里面的内容了.

#container 是对网页头部进行类别定义的{}，大括号里面的值就是网页头部（head）的布局进行控制的；
#pagebody 是对页面主题进行布局的类属；
同理，#sidebar是对侧边栏的布局控制，#footer是对网页底部进行布局的类属.

如果现在给你出个考题：小川博客的首页布局都包括哪些？
                                                你是否可以准确的回答出来呢？