div是XHTML中专门用于布局设计的容器对象。下面我们就来接触最常见的并列与嵌套。
看代码：

程序代码

<div id="header">头部</div>          

<div id="center">中间部分</div>

<div id="footer">底部</div>



在此我们为每一个div对象加了一个id名称，以便于css能够区别对待。

以上代码实现了头部、中间部分与底部的并列。但在大多情况下，中间部分又分为左栏与右栏部分。

这时候我们就要在中间部分嵌套进去一个左栏和一个右栏，如下代码：


程序代码

<div id="header">头部</div>          

<div id="center">

    <div id="left"></div>

    <div id="right"></div>

</div>

<div id="footer">底部</div>



而在大多数情况下，我们还会为头部加上标题区与导航区。理论上也是嵌上去的，如代码：

程序代码

<div id="header">

    <div id="title">标题区</div>

    <div id="nav">导航</div>

</div>


但要注意的是：虽然是可以嵌套上去的，也可以多级嵌套，但这样势必会占用浏览器较多的资源来解析这种布局，有些时候还会出现解析错误。从实用性上来说，XHTML为我们提供了多种标签，如

h1,strong,span,p,ul,li,img,div,body……，它们每一个标签都有各自实用的元素，在合适的地方使用合乎元素意义的标签是很有必要的。这样不仅增加了可读性与可伸缩性，而且也符合“物有所值”的原则——div主要用于大块布局的调整。想一想，杀死焉用牛刀？

因此上面的代码可以改良为：

程序代码

<div id="header">

    <h1>标题区</h1>

    <ul>导航</ul>

</div>

<div id="center">

    <div id="left"></div>

    <div id="right"></div>

</div>

<div id="footer">底部</div>


来看一下代码在DW编辑器与IE浏览器中的对比：





补充说明：

从图中找不到中部，是因为XHTML中没有放置内容，且没有为他们设置css样式,所以其内部的左右栏也没有可显示的。

头部标题区与导航区由于使用了XHTML中的h1与ul标签，它们则按照其默认的样式显示。

而底部应用的是div标签，它在没有css样式的情况下也将无任何样式的显示。