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

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

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

程序代码

#container{margin:0px auto;}

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

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

程序代码

#pri_left,#pri_right{float:left;width:75%;}
#pri_left{width:20%;}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>

<body>
<div id="container">
    <div id="header">头部：位于顶端，显示网站LOGO及其它相关元素。</div>
    <div id="mainmenu">主菜单</div>
    <div id="banner">头部横幅广告</div>
    <div id="menu">频道菜单</div>
    <div id="primary">
        <div id="pri_left">div为pri_left</div>
        <div id="pri_right">
        <div id="pri_right1" class="kuang1">div为pri_right1</div>
        <div id="pri_right2" class="kuang2">div为pri_right2</div>
        <div id="pri_right3" class="kuang2">div为pri_right3</div>
        <div id="pri_right4" class="kuang1">div为pri_right4</div>
        <div id="pri_right5" class="kuang2">div为pri_right5</div>
        <div id="pri_right6" class="kuang2">div为pri_right6</div>
        <div id="pri_right7" class="kuang3">div为pri_right7</div>
        <div id="pri_right8" class="kuang4">div为pri_right8</div>
        <div id="pri_right8" class="kuang5">div为pri_right9</div>
        </div>
    </div>
    <div id="footer">脚部区：显示底部功能链接和版权信息。</div>
</div>
</body>
</html>

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

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

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

posted @ 2010-09-11 12:49 你妹的sb 阅读(1046) 评论(0) 编辑收藏举报

刷新页面返回顶部

夏楚枫

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

公告