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

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

　　我们看下面的图片：

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

　　它们相对应的关系如下：

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

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

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

　　整体布局声明，边距与填充均为零。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

　　对header的定义：宽度为776px；高度为100px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为蓝色#06f。

　　对main的定义：宽度为776px；上下边距为零，左右边距为自动，实现了水平居中对齐；无背景色等其它设置。

　　对main的子层sidebar进行定义：宽度为200px；向左浮动；背景色为桔红色#f93。

　　对main的子层containe进行定义：宽度为576px(776-200)；向右浮动；背景色为很淡的蓝色#dceafc。

　　对footer的定义：宽度与上面的一样为776px；高度为60px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为深灰色#666。

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

　　我们应该在sidebar、containe结束的地方清除浮动，让FF知道如何处理footer层，而不是直接放到上面，在视觉上消失。我们在HTML中增加一个新层，位于sidebar、containe结束的地方：

　　设置的意义是：clear:both;是指不允许左右有浮动对象；高度为1px；溢出为隐藏；顶边距为-1px，即这一层实际上是不可见的，仅为清除浮动之用。