寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,433,001 次
  • 运行天数:612 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

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

上一节教程我们已经提到: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

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2007-11-14
3,763 views
标签: , ,
暂无评论

发表评论

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