- 浏览: 38485 次
- 性别:
- 来自: 北京
文章分类
最新评论
好书推荐《网站重构》
===============================
如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。(本文的经验和是蓝色理想论坛xpoint、guoshuang共同讨论得出的。)
首先先按这里看实际运行效果 ,这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码:
完整代码
<html>
<head>
<style type="text/css">
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
代码分析
首先我们定义body和顶部第一行#header,这里面的关键是body中的text-align:center; 和header中的margin-right: auto;margin-left: auto; ,通过这两句使得header居中。注:其实定义text-align:center;就已经在IE中实现居中,但在mozilla中无效,需要设置margin:auto;才可以实现mozilla中的居中。
接下来定义中间的两列#right和#left。为了使中间两列也居中,我们在它们外面嵌套一个层#contain,并对contain设置margin:auto;,这样#right和#left就自然居中了。
注意中间两列定义的顺序,我们首先定义#right,通过float: right; 让它浮在#contain层的最右边。然后再定义#left,通过float: left; 让它浮动在#right层的左面。这和我们以前表格从左到右定义的顺序正好相反(更正:先左后右、还是先右后左都可以实现,根据自己需要设计)。
我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg,这个层是做什么用的呢?这个层就是用来定义#contain的背景的。你肯定会问,为什么不直接在#contain中定义背景,而要多套一层呢?那是因为在#contain中直接定义的背景,在mozilla中将显示不出来,必须定义高度值才可以。如果定义了高度值,#right层就无法实现根据内容的自动伸缩。为了解决背景和高度问题,就必须增加这么一个#mainbg层。窍门在于#mainbh这个层定义float: left; ,因为float使层自动有宽和高的属性。(暂且这么理解:)
最后是定义底部的#footer层。这个定义的关键是:clear:both; ,这一句话的作用是取消#footer层的浮动继承。否则的话,你会看到#footer紧贴着#header显示,而不是在#right的下面。
主要的层定义完毕,这个布局就ok了。补充一点:你看到我还定义了一个.text{margin:0px;padding:20px;} ,这个class的作用是使内容的外围有20px的空白。为什么不直接在#right里定义margin或者padding呢,因为mozilla和IE对css盒模型的解释不一致,直接定义margin/padding会造成mozilla里布局变形。我一般采用内部再套一层的做法来解决。
希望这个布局对你有帮助,有什么问题欢迎到论坛交流。
发表评论
-
书_大学学习
2013-01-08 08:32 0写到这里,我想罗列一下“计算机专业”那些重要的课程,当然 ... -
书_C++学习–基础篇(书籍推荐及分享)[转]
2012-12-28 09:13 0[转] 原贴:http://colin115.iteye.co ... -
书_已买_准备买
2012-12-26 09:01 0=====================准备买 ... -
书_阿朱_好好看书[转]
2012-12-26 09:01 387好好看书小时候特别爱 ... -
书_注册电气工程师相关课程的大学教材
2012-12-25 13:58 0http://club.topsage.com/threa ... -
书_StackOverflow _一个合格的程序员应该读过哪些书[转]
2012-12-24 23:16 859=========== 上了大学,更多是技能方面 ... -
书_2012前的设计书单[网页设计][转]
2012-12-26 09:02 604http://suqing.iteye.com/blog/17 ... -
书_java_Java经典好书推荐-从入门到进阶[转]
2012-12-24 23:17 562http://blog.csdn.net/qiul12345/ ... -
书_JavaScript_的那些书[转]
2012-12-24 23:17 570http://limu.iteye.com/blog/1267 ... -
书_java_学好Java基础的几本书[转]
2012-12-24 23:21 443每一门语言及技术都各有各的特点,以下是我在学习Java开发过程 ... -
书_学习过程_四大天王_good_计算机经典书籍介绍[转]
2012-12-25 13:19 925计算机经典书籍介绍(转) 云计算编程游 ... -
书_重构书[转]
2012-12-25 13:20 550Martin Fowler的《重构》英文版出版于1999 ... -
书_微博_一些经典的计算机书籍[转]
2012-12-25 13:20 523以下列表中的计算机书 ... -
书_国外程序员推荐:每个程序员都应读的书[转]
2012-12-26 09:03 627编者按:2008年8月4日,StackOverflow 网友 ...
相关推荐
三维图像重构,三维图像重构,三维图像重构
医学图像三维重构平台,实现了三维重构用VC++实现
模拟空间多孔介质,用matlab三维曲面重构。
木书是·木重构指南( guide to refacaoring ),为专业程序员而写。我的目的是告诉你如何以一种可控制且高效率的方式进行重构。你将学会这样的重构方式:不引入臭虫〔错误);并且有条不紊地改进程序结构、 按照传统,...
iOS 高度封装自适应表单(重构版)
资源名:用于信号的EMD、EEMD、VMD分解_vmd重构_故障诊断emd_故障诊断_故障重构_VMD信号重构 资源类型:matlab项目全套源码 源码介绍:用于信号的分解、降噪和重构,实现故障诊断 源码说明: 全部项目源码都是经过...
用于信号的EMD、EEMD、VMD分解_vmd重构_故障诊断emd_故障诊断_故障重构_VMD信号重构_源码.rar.rar
具有自适应网格重构的有限差分计算流体代码
对经验模态分解后的各分量IMF进行重构代码,函数可直接调用。
reconfiguration_配电网_配电网络重构_reconfiguration_配电网重构_配电网重构_源码.zip
reconfiguration_配电网_配电网络重构_reconfiguration_配电网重构_配电网重构.zip
用MATLAB实现计算机视觉中三维重构所需的基本矩阵的运算
matlab_自适应EEMD程序加信号重构,包含:1、eemd程序2、自适应eemd程序3、自适应eemd程序加信号重构
基于遗传算法的配电网络重构程序。用Visual C++ 编写,很经典。
压缩感知重构算法之稀疏度自适应匹配追踪(SAMP)的函数
emd分解及其重构,分解成对个IMF,然后进行重构
压缩感知稀疏度自适应重构算法,含有子功能程序和主程序,注意程序中数值与所选图像尺寸的匹配
相空间重构函数,可以直接用于时间序列重构,是混沌方法的基础
本程序实现Lena图像的压缩传感,测量矩阵为哈达玛测量矩阵,重构算法采用OMP重构算法