129
图11-2  设置DIV 区域的大小
11.2  图层（DIV）的嵌套与浮动
类似于表格布局页面，为了实现复杂的布局结构，DIV 元素也需要互相嵌套。不过在布局页面时尽量少用DIV 嵌套，因为DIV 元素多重嵌套将影响浏览器对代码的解析速度。
【实例11-3】DIV 图层的嵌套。
在Dreamweaver 中创建名称为div3.html 的HTML 页面，其代码如下所示：
<html>
<head>
<style type="text/css">
*{margin:0px;padding:0px;}
#all{width:400px;height:300px;background-color:#600;margin:0px auto;}
#one{width:300px;height:120px;background-color:#eee;border:1px solid #000;margin: 0px auto;}
#two{width:300px;height:120px;background-color:#eee;border:1px solid #000;margin: 0px auto;}
</style>html网页设计css
</head>
<body>
<div id="all">
<div id="one">顶部图层</div>
<div id="two">底部图层</div>
</div>
</body>
</html>
在上述代码中，使用CSS 定义了3个选择符，每个选择符中都定义了图层区域的长度和宽度以及边距等属性。在HTML 页面中首先定义了父容器（外部DIV ），在其中嵌套定义了两个子容器（内部DIV ），从而实现了DIV 的嵌套显示。该页面显示效果如图11-3所示。
<div>标签默认占据一行，如果页面中要实现并列的2块区域的布局，这就需要使用块状元素中很重要的float 属性，该属性可以实现多个块状元素并列于一行显示。
float 属性也叫作浮动属性，对前面的DIV 元素设置浮动属性后，当前面的DIV 元素留有足够的空白宽度时，后面的DIV 元素将自动浮动上来，和前面的DIV 元素并列于一行。float 属性

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