首页 / CSS / DIV + CSS 实现最经典的布局
DIV + CSS 实现最经典的布局
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了DIV + CSS 实现最经典的布局，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2872字，纯文字阅读大概需要5分钟。
内容图文
我们遇到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或BANNER，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。这样的形式是国内经典式的布局，我们这里不对它的视觉效果作过多的讨论，我们今天说说如何用DIV+CSS实现三行两列的布局。我们看下面的图片：
这样的结构大家再熟悉不过了，我们该如何用DIV+CSS实现它呢。我们看下面的分析图片：
它们相对应的关系如下：
顶部：header
左侧：sidebar
右侧：containe
底部：footer
主要区域：main
左侧：sidebar
右侧：containe
底部：footer
主要区域：main
这个main是起什么作用的呢。由于中间的sidebar、containe是两列并行的，我们需要设置浮动，让他们各就各位。但我们的整个页面是需要居中于浏览器窗口的。我们只能为他们设置一个容器main，让sidebar、containe在这一容器中浮动。不必考虑居中问题。而main就发挥了居中或设置背景的功能。
思路已很清晰，我们开始整理HTML代码：
<div id="header"></div>
<div id="main">
<div id="sidebar"></div>
<div id="containe"></div>
</div>
<div id="footer"></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，通过浮动的设置，不管哪一个写在代码前部，所得到效果是一致的，我们可以通过让内容在前面的方式对搜索引擎更友好，如下代码：
<div id="header"></div>
<div id="main">
<div id="containe"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
<div id="main">
<div id="containe"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
我们开始写CSS，对上面的各元素进行样式表定义：
* {
margin:0;
padding:0;
}
margin:0;
padding:0;
}
整体布局声明，边距与填充均为零。
#header {
width:776px;
height:100px;
margin:0 auto;
background:#06f;
}
width:776px;
height:100px;
margin:0 auto;
background:#06f;
}
对header的定义：宽度为776px；高度为100px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为蓝色#06f。
#main {
width:776px;
margin:0 auto;
}
width:776px;
margin:0 auto;
}
对main的定义：宽度为776px；上下边距为零，左右边距为自动，实现了水平居中对齐；无背景色等其它设置。
#main #sidebar {
width:200px;
float:left;
background:#f93;
}
width:200px;
float:left;
background:#f93;
}
对main的子层sidebar进行定义：宽度为200px；向左浮动；背景色为桔红色#f93。
#main #containe {
width:576px;
float:right;
background:#dceafc;
}
width:576px;
float:right;
background:#dceafc;
}
对main的子层containe进行定义：宽度为576px(776-200)；向右浮动；背景色为很淡的蓝色#dceafc。
#footer {
width:776px;
height:60px;
margin:0 auto;
background:#666;
}
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结束的地方：
<div id="header"></div>
<div id="main">
<div id="sidebar"></div>
<div id="containe"></div>
<div id="clearfloat"></div>
</div>
<div id="footer"></div>
<div id="main">
<div id="sidebar"></div>
<div id="containe"></div>
<div id="clearfloat"></div>
</div>
<div id="footer"></div>
我们定义clearfloat的样式为：
#clearfloat {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}
设置的意义是：clear:both;是指不允许左右有浮动对象；高度为1px；溢出为隐藏；顶边距为-1px，即这一层实际上是不可见的，仅为清除浮动之用。
好了，现在基本上没有问题了，接下来就是在页面中设置菜单、添加内容并进行相应的样式定义。关于这些知识我们在以后52CSS.com的文章中再一一向大家介绍。
原文：http://blog.csdn.net/u011340807/article/details/19204577
内容总结
以上是互联网集市为您收集整理的DIV + CSS 实现最经典的布局全部内容，希望文章能够帮你解决DIV + CSS 实现最经典的布局所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】