A-A+

四、div的常见布局结构——并列与嵌套

2007年11月14日 网站运维 暂无评论 阅读 3,704 views 次

上一节教程我们已经提到:div是XHTML中专门用于布局设计的容器对象。下面我们就来接触最常见的并列与嵌套。
看代码:

XML/HTML代码
  1. <div id="header">头部</div>
  2. <div id="center">中间部分</div>
  3. <div id="footer">底部</div>

在此我们为每一个div对象加了一个id名称,以便于css能够区别对待。
以上代码实现了头部、中间部分与底部的并列。但在大多情况下,中间部分又分为左栏与右栏部分。
这时候我们就要在中间部分嵌套进去一个左栏和一个右栏,如下代码:

XML/HTML代码
  1. <div id="header">头部</div>
  2. <div id="center">
  3. <div id="left"></div>
  4. <div id="right"></div>
  5. </div>
  6. <div id="footer">底部</div>

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

XML/HTML代码
  1. <div id="header">
  2. <div id="title">标题区</div>
  3. <div id="nav">导航</div>
  4. </div>

但要注意的是:虽然是可以嵌套上去的,也可以多级嵌套,但这样势必会占用浏览器较多的资源来解析这种布局,有些时候还会出现解析错误。从实用性上来说,XHTML为我们提供了多种标签,如
h1,strong,span,p,ul,li,img,div,body……,它们每一个标签都有各自实用的元素,在合适的地方使用合乎元素意义的标签是很有必要的。这样不仅增加了可读性与可伸缩性,而且也符合“物有所值”的原则——div主要用于大块布局的调整。想一想,杀死焉用牛刀?
因此上面的代码可以改良为:

XML/HTML代码
  1. <div id="header">
  2. <h1>标题区</h1>
  3. <ul>导航</ul>
  4. </div>
  5. <div id="center">
  6. <div id="left"></div>
  7. <div id="right"></div>
  8. </div>
  9. <div id="footer">底部</div>

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

补充说明:
从图中找不到中部,是因为XHTML中没有放置内容,且没有为他们设置css样式,所以其内部的左右栏也没有可显示的。
头部标题区与导航区由于使用了XHTML中的h1与ul标签,它们则按照其默认的样式显示。
而底部应用的是div标签,它在没有css样式的情况下也将无任何样式的显示。

原文地址:http://www.chaojibaby.com/blog/article.asp?id=108

给我留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录