使用 div 进行页面布局效果要好得多。除了这是推荐使用的最佳方法之外,代码的装载速度会更快,也更易于处理。
表及其单元格的格式(formatting)属性被借用到固定宽度布局中,因为指定这些元素的尺寸相当简单。其实通过 div 可以做到同样的事情,只要确定 div 精确的维数并使用绝对和相对定位将这些 div 定位到页面上即可。
一个固定宽度的例子
图 A 展示了一个典型的固定宽度的布局,该布局由顶部的一个标题,一个三列内容的区域(主内容列,每侧有一个工具条),和页面底部的一个页脚所组成。所有元素的宽度都是固定的;在浏览器窗口发布变化时它们的尺寸都不会变化。
下面的 XHTML 标记生成图 A 所示的页面。(出于简单考虑,内容被截短。)
<body>
<div id="head">
<h1>header</h1>
</div>
<div id="columns">
<div id="side1">
<h3>side1</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
<li>Oh, no, it is an ever fixed mark</li>
</ul>
</div>
<div id="content">
<h2>main content</h2>
<p>That looks on tempests ... his height be taken.</p>
<p>But bears it out ... alteration finds.</p>
<p>Whose worth's unknown, ... the remover to remove.</p>
</div>
<div id="side2">
<h3>side2</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="foot">
<h3>footer</h3>
<p>Or bends with ... height be taken. </p>
</div>
</body>作者: superadmin 时间: 2007-9-27 17:50
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
h2,h3 {
margin-top: 0px;
padding-top: 0px;
}
div#head {
position: absolute;
width:750px;
height:100px;
left:0px;
top: 0px;
background-color: #FFFF66;
}
div#columns {
position: relative;
width: 750px;
top: 100px;
background-color: #CCCCCC;
}
div#side1 {
position:absolute;
width:150px;
top: 0px;
left:0px;
background-color: #FF6666;
}
div#content {
position: relative;
width: 450px;
top: 0px;
left: 150px;
background-color: #999999;
}
div#side2 {
position:absolute;
width:150px;
top: 0px;
left: 600px;
background-color: #00FF66;
}
div#foot {
position: relative;
width: 750px;
clear: both;
margin-top: 100px;
background-color: #99FFFF;
}
分解代码
这段标记并不是特别地值得注意——只是在每个主要页面元素的外面(标题、页脚、工具条和主内容)包围着 div。每个 div 有一个 id,相应的 CSS 样式可以使用这个 id 引用它。只有一个额外的 div(div id="columns")包围着三列内容区域。在 Internet Explorer 中将页脚放在三列中最长一列的下面是必要的。