1、如何实现常见的一种网页布局是一列布局：分为上、中、下三部分？如下图所示：
答：通过div+css可以很容易实现。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#header {
height: 50px;
background-color: #6C0;
width: 80%;
}
#main {
background-color: #66C;
height: 500px;
width: 80%;
}
#footer {
background-color: #FCC;
height: 50px;
width: 80%;
}
</style>
</head>
<body>
<div id="header">
<p>此处显示 id "header" 的内容</p>
</div>
<div id="main">
<p>此处显示 id "main" 的内容</p>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</body>
</html>
2、如何让三个div居中显示呢？
答： 在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中（文章出处：标准之路http://www.aa25.cn/div_css/903.shtml）。
我们可以看到上图的div块是左对齐显示，要想让其居中显示，我们需要设置其margin属性值为auto。修改css代码如下：
<style type="text/css">
#header {
height: 50px;
background-color: #6C0;
width: 80%;
margin: auto;
}
#main {
background-color: #66C;
height: 500px;
width: 80%;
margin: auto;
}
#footer {
background-color: #FCC;
height: 50px;
width: 80%;
margin: auto;
}
</style>
效果如下图：
3、当把width设置为100%时，为什么还会有很宽的白边，如何去掉这些白边？
答：当我们把width设置为100%时，会发现依然有很宽的白边，如下图所示：
这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉（文章出处：标准之路http://www.aa25.cn/div_css/903.shtml)。效果如下图所示：
参考文章： DIV+CSS教程：第二天 一列布局
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
