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

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

　　我们看下面的图片：

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

　　它们相对应的关系如下：

Example Source Code [www.mb5u.com]

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

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

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

Example Source Code [www.mb5u.com]

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

Example Source Code [www.mb5u.com]

　　我们开始写CSS，对上面的各元素进行样式表定义：

Example Source Code [www.mb5u.com]

* {
margin:0;
padding:0;
}

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

Example Source Code [www.mb5u.com]

#header {
width:776px;
height:100px;
margin:0 auto;
background:#06f;
}

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

Example Source Code [www.mb5u.com]

#main {
width:776px;
margin:0 auto;
}

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

Example Source Code [www.mb5u.com]

#main #sidebar {
width:200px;
float:left;
background:#f93;
}

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

Example Source Code [www.mb5u.com]

#main #containe {
width:576px;
float:right;
background:#dceafc;
}

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

Example Source Code [www.mb5u.com]

#footer {
width:776px;
height:60px;
margin:0 auto;
background:#666;
}

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

　　或许你认为我们对布局的CSS定义已经结束了，其实还存在着问题，为了方便预览，我们给sidebar、containe设置一个300px的高度，查看一下效果，如图：

　　在IE中，一切正常，按预定的构思正常显示出来了，但在FF中，footer层消失了。这是因为FF不知道浮动以后发生的事情，不清楚main的高度为几何，因而它跑到上面去了，我们看不到它的存在。我们去除containe的背景色，FF中看到的是如下图的景象：

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

Example Source Code [www.mb5u.com]

　　我们定义clearfloat的样式为：

Example Source Code [www.mb5u.com]

#clearfloat {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}

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

　　好了，现在基本上没有问题了，接下来就是在页面中设置菜单、添加内容并进行相应的样式定义。关于这些知识我们在以后MB5U.com的文章中再一一向大家介绍。

转载于:https://www.cnblogs.com/gaoxuzhao/archive/2011/11/19/2255186.html

CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例相关推荐

div+css经典三行两列布局
写在前面在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
DIV+CSS三行两列经典布局
师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应.完整代码如下(在阿捷的代码基础上作了部分修改): < ...
任意列+左右两列等高布局，并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
[html] 实现两列等宽布局的方式有哪些？
[html] 实现两列等宽布局的方式有哪些? 1.flex实现: .parent { display: flex; } .child { flex: 1; width: 50%; } 2.float实 ...
flex 两列多行布局
flex 两列多行布局 display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; 把这段 ...
一个三行两列右列固定左列自适应宽度的CSS
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-/ ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
html cols跨两列,html – CSS奇怪,甚至有2个cols
一个模式中有四篇文章,因此4n的一些偏移应该可以解决问题.这似乎工作( Fiddle): article {color:blue} article:nth-child(4n-1), article:n ...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...

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

CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例相关推荐

最新文章

热门文章