CSS布局教程：用DIV+CSS实现国内经典式三行两列布局

　　版权声明：原创，未经本站同意，严禁转载！

　　我们遇到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或BANNER，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。这样的形式是国内经典式的布局，我们这里不对它的视觉效果作过多的讨论，我们今天说说如何用DIV+CSS实现三行两列的布局。

　　我们看下面的图片：


　　这样的结构大家再熟悉不过了，我们该如何用DIV+CSS实现它呢。我们看下面的分析图片：


　　它们相对应的关系如下：

Example Source Code [www.]顶部：header
左侧：sidebar
右侧：containe
底部：footer
主要区域：main
　　这个main是起什么作用的呢。由于中间的sidebar、containe是两列并行的，我们需要设置浮动，让他们各就各位。但我们的整个页面是需要居中于浏览器窗口的。我们只能为他们设置一个容器main，让sidebar、containe在这一容器中浮动。不必考虑居中问题。而main就发挥了居中或设置背景的功能。

　　思路已很清晰，我们开始整理HTML代码：

Example Source Code [www.]<div id="header"></div>
<div id="main">
    <div id="sidebar"></div>
    <div id="containe"></div>
</div>
<div id="footer"></div>
　　header、main、footer是三个相对独立的层，而sidebar、containe是main层的子层。这里有一点需要说明，我们可以先写siderbar、也可以先写containe，通过浮动的设置，不管哪一个写在代码前部，所得到效果是一致的，我们可以通过让内容在前面的方式对搜索引擎更友好，如下代码：

Example Source Code [www.]<div id="header"></div>
<div id="main">
    <div id="containe"></div>
    <div id="sidebar"></div>
</div>
<div id="footer"></div>
　　我们开始写CSS，对上面的各元素进行样式表定义：

Example Source Code [www.]* {
    margin:0;
    padding:0;
}
　　整体布局声明，边距与填充均为零。

Example Source Code [www.]#header {
    width:776px;
    height:100px;
    margin:0 auto;
    background:#06f;
}
　　对header的定义：宽度为776px；高度为100px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为蓝色#06f。

   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）