十天学会Div+CSS第二天之一列布局

一、一列固定宽度

<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>

二、一列固定宽度居中
一列固定宽度居中和一列固定宽度相比，我们要解决的问题就是居中。这里我们用到css的外边距属性：margin。在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。我们下边在css样式表中加上这个属性看看效果：


#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }

三、一列自适应宽度
自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看：

#layout { height: 300px; background: #99FFcc;}

有些朋友可能要问了，那为什么还有那么宽的白边呢？这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉，这时再预览一下，白边就没了。

body { margin: 0px; }
#layout { height: 300px; background: #99FFcc;}

四、一列自适应宽度居中
同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。

body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }

五、一列二至多块布局
一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、询问（footer）。

采用固定宽度居中的方式，代码如下：

body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

为了便于区分，在背景项里设置了背景色，这里不在贴图。依此类推，把另外两个div块给置好，整个效果就出来了。这是一个大多数网站采用的上中下布局结构。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head></p>
<p><body>
<div id="header">此处显示  id "header" 的内容</div>
<div id="main">此处显示  id "main" 的内容</div>
<div id="footer">此处显示  id "footer" 的内容</div>
</body>
</html>
posted @ 2012-08-06 18:15  TBHacker  阅读(2030)  评论(0)    收藏  举报