33.2　用DIV布局框图

本小节通过对一张空网页的编写，慢慢实现博客主页面的布局，博客主页面分成页眉、内容模块和页脚，在博客中，页眉用来标明博客的名称和对博客的描述，往往用背景图作为名称的背景，该图可以体现博客的风格。在页眉下面有导航栏，用来链接主要模块的地址，如相册、日志等。具体的内容因不同模块在主页面中放置在不同位置，如个人信息放在中部左上角，相片封面在中间显示，留言在中部的下面显示。最后在页脚声明博客版权、ICP备案号等信息。

33.2.1　页眉

页眉是博客主页的头部，也是显示博客主题的位置，绝大部分博客都在这个位置用背景和几行简要文字叙述博客属性，如“张三的博客”为第一行，主要是博客名称，第二行为对博客的一种描述，如张三这样写—学习HTML+CSS的技术博客。这样从页眉就可以看出，这博客是张三的，而且他喜欢写HTML，通常用CSS来布局。

现在从HTML代码中，用DIV来描述头部的层。分析一下，头部由两块组成，首先，在头部上面用一条黑色的框显示，然后用一张图片做DIV层的背景，最后放置两行文本，即博客名和对博客的描述。下面还有一层设置主要模块的链接，如首页、相册等，页眉的层比较少，代码如下。

01 ＜div class="bgup"＞＜/div＞

02 ＜div class="blogheader"＞张三的博客＜/div＞

03 ＜div class="myblogbanner"＞首 页 日 志

04 相 册 音 乐 好

05 友 个人档＜/div＞

【代码解析】上面的代码有3个层，代码第1行为第1层，是背景颜色，代码第2行为第2层，设置博客名等，代码第3行为第3层，是一些主要模块的链接。这些层都包含在＜body＞＜/body＞标记对中。