CSS布局教程模板：用DIV+CSS实现经典式三行两列布局_html/css_WEB-ITnose

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

　　我们看下面的图片：

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

　　它们相对应的关系如下：

顶部：header
左侧：sidebar
右侧：containe
底部：footer
主要区域：main

　　这个main是起什么作用的呢。由于中间的sidebar、containe是两列并行的，我们需要设置浮动，让他们各就各位。但我们的整个页面是需要居中于浏览器窗口的。我们只能为他们设置一个容器main，让sidebar、containe在这一容器中浮动。不必考虑居中问题。而main就发挥了居中或设置背景的功能。

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

查看更多关于CSS布局教程模板：用DIV+CSS实现经典式三行两列布局_html/css_WEB-ITnose的详细内容...