四、div的常见布局结构——并列与嵌套
div是XHTML中专门⽤于布局设计的容器对象。下⾯我们就来接触最常见的并列与嵌套。
看代码：
程序代码
<div id="header">头部</div>
<div id="center">中间部分</div>
<div id="footer">底部</div>
在此我们为每⼀个div对象加了⼀个id名称，以便于css能够区别对待。
以上代码实现了头部、中间部分与底部的并列。但在⼤多情况下，中间部分⼜分为左栏与右栏部分。
这时候我们就要在中间部分嵌套进去⼀个左栏和⼀个右栏，如下代码：
程序代码
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样式的情况下也将⽆任何样式的显⽰。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。