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

九、利用div的定位制作复杂的页面布局

既然是复杂的布局自然用到较多的div以及并列与嵌套。这就要我们在为它们命名的时候遵从一定的规定,以便于可读性。
下面先来看一张布局图:

image

这是三九健康网一个频道的页面,原本是很长的页面,但为了说明问题,取了个完整布局样式,而省去了中间的内容。
我们可以把它看做是一个居中的页面布局,这样要实现整体居中,就需要一个div作为主要容器,我们把这个div命名为container.
CSS样式为:

CSS代码
  1. #container{margin:0px auto;}

这样就实现了整体居中显示。

我们再来看在这个主容器里面分别都有哪些部分:
#header头部:位于顶端,显示网站LOGO及其它相关元素。
#mainmenu主菜单
#banner头部横幅广告
#menu频道菜单
#primary主内容区
#footer脚部区:显示底部功能链接和版权信息。
这些区域从上至下依次排列形成了纵向布局模式。它们之间是并列的,不需要要指定任何样式便可以实现从上到下的叠放。
而在主内容区,又加入了嵌套,即嵌套了两个div区域,左边为:pri_left,右边为pri_right.这两个如何实现左右分栏的,在前面的第六节教程里有详细的说明。在此再罗嗦下,也就是使用了float浮动属性。
css样式为:

CSS代码
  1. #pri_left,#pri_right{float:left;width:75%;}
  2. #pri_left{width:20%;}

此处代码注意:在属性的书写上我们采用了简化的方式应用了群组标签#pri_left,#pri_right{},在参数的书写上,我们为他们二者都定义了width:75%.节约了代码量,但紧接着在下面的属性中单独为左栏定义了width:20%,此时的左栏宽就会覆盖掉上一句的width:75%.从而实现了二者宽度的单独定义。
下面我们来定义这种样式,为了能够显示区域,我们只为他们加上宽度高度及边框样式。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type=“text/css”>
  6. <!–
  7. #container{margin:0px auto;border:1px dashed #d55;width:98%;}
  8. #header{border:1px solid #d55;height:48px;margin-top:0px;}
  9. #mainmenu{border:1px solid #d55;height:36px;margin-top:2px;}
  10. #banner{border:1px solid #d55;height:60px;margin-top:2px;}
  11. #menu{border:1px solid #d55;height:36px;margin-top:2px;}
  12. #primary{border:1px solid #d55;margin-top:2px;}
  13. #pri_left,#pri_right{float:left;width:78%;border:1px solid #d55;margin:0px 2px;height:300px;}
  14. #pri_left{width:20%;}
  15. .kuang1{float:left;border:1px dashed #d55;width:40%;height:100px;}
  16. .kuang2{float:left;border:1px dashed #d55;width:29%;height:100px;}
  17. .kuang3{float:left;border:1px dashed #d55;width:69%;height:48px;}
  18. .kuang4{float:left;border:1px dashed #d55;width:29%;height:48px;}
  19. .kuang5{float:left;border:1px dashed #d55;width:99%;height:50px;}
  20. #footer{border:1px solid #d55;height:48px;margin-top:2px;}
  21. >
  22. </style>
  23. </head>
  24. <body>
  25. <div id=“container”>
  26. <div id=“header”>头部:位于顶端,显示网站LOGO及其它相关元素。</div>
  27. <div id=“mainmenu”>主菜单</div>
  28. <div id=“banner”>头部横幅广告</div>
  29. <div id=“menu”>频道菜单</div>
  30. <div id=“primary”>
  31. <div id=“pri_left”>div为pri_left</div>
  32. <div id=“pri_right”>
  33. <div id=“pri_right1” class=“kuang1”>div为pri_right1</div>
  34. <div id=“pri_right2” class=“kuang2”>div为pri_right2</div>
  35. <div id=“pri_right3” class=“kuang2”>div为pri_right3</div>
  36. <div id=“pri_right4” class=“kuang1”>div为pri_right4</div>
  37. <div id=“pri_right5” class=“kuang2”>div为pri_right5</div>
  38. <div id=“pri_right6” class=“kuang2”>div为pri_right6</div>
  39. <div id=“pri_right7” class=“kuang3”>div为pri_right7</div>
  40. <div id=“pri_right8” class=“kuang4”>div为pri_right8</div>
  41. <div id=“pri_right8” class=“kuang5”>div为pri_right9</div>
  42. </div>
  43. </div>
  44. <div id=“footer”>脚部区:显示底部功能链接和版权信息。</div>
  45. </div>
  46. </body>
  47. </html>

以上是实现页面样式的代码,代码看起来比较繁杂,但里面有很多可以简化的地方,比如充分利用class(类)来指派参数,能缩减代码量,且增加可读性。当然这不是本节讲解的重点,我们会在未来的教程中详细论述。
代码效果如图

image

细心的朋友会发现我们在pri_right区域里用pri_right1~pri_right9分别指定了9个DIV对象,这里面就是充分利用了浮动的属性,而不必再次嵌套。把它们中的每个对象都设定出固定的宽度与高度,加上向左浮动的属性,就会从左向右排列,到右侧容不下时,就会转入下一行显示,从而实现它们的整齐排列。当然这种方式,关键在于设定的精确的宽高。

可见,div的重要作用就是实现大页面的大布局,并且充分利用其浮动定位及并列嵌套的关系,构造出复杂多样的布局样式来。

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

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

发表评论

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