div+css布局完整代码

网上流传的，我觉得很经典了，你可以看原地址更清楚些。CSS常用布局实例一列单行一列body{margin:0px;padding:0px;text-align:center;}#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列body{margin:0px;padding:0px;text-align:center;}#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}三行一列body{margin:0px;padding:0px;text-align:center;}#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}#content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;}#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}两列单行两列#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:410px;}两行两列#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:410px;}三行两列#header{width:700px;margin-right:auto;margin-left:auto;}#bodycenter{width:700px;margin-right:auto;margin-left:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:410px;}#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}三列单行三列绝对定位#left{position:absolute;top:0px;left:0px;width:120px;}#middle{margin:20px190px20px190px;}#right{position:absolute;top:0px;right:0px;width:120px;}float定位xhtml:divid=warpdivid=columndivid=column1这里是第一列/divdivid=column2这里是第二列/divdivclass=clear/div/divdivid=column3这里是第三列/divdivclass=clear/div/divCSS:#wrap{width:100%;height:auto;}#column{float:left;width:60%;}#column1{float:left;width:30%;}#column2{float:right;width:30%;}#column3{float:right;width:40%;}.clear{clear:both;}float定位二xhtml:divid=centerclass=columnh1Thisisthemaincontent./h1/divdivid=leftclass=columnh2Thisistheleftsidebar./h2/divdivid=rightclass=columnh2Thisistherightsidebar./h2/divCSS:body{margin:0;padding-left:200px;padding-right:190px;min-width:240px;}.column{position:relative;float:left;}#center{width:100%;}#left{width:180px;right:240px;margin-left:-100%;}#right{width:130px;margin-right:-100%;}两行三列xhtml:divid=header这里是顶行/divdivid=warpdivid=columndivid=column1这里是第一列/divdivid=column2这里是第二列/divdivclass=clear/div/divdivid=column3这里是第三列/divdivclass=clear/div/divCSS:#header{width:100%;height:auto;}#wrap{width:100%;height:auto;}#column{float:left;width:60%;}#column1{float:left;width:30%;}#column2{float:right;width:30%;}#column3{float:right;width:40%;}.clear{clear:both;}三行三列xhtml:divid=header这里是顶行/divdivid=warpdivid=columndivid=column1这里是第一列/divdivid=column2这里是第二列/divdivclass=clear/div/divdivid=column3这里是第三列/divdivclass=clear/div/divdivid=footer这里是底部一行/divCSS:#header{width:100%;height:auto;}#wrap{width:100%;height:auto;}#column{float:left;width:60%;}#column1{float:left;width:30%;}#column2{float:right;width:30%;}#column3{float:right;width:40%;}.clear{clear:both;}#footer{width:100%;height:auto;}PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置margin,padding,boeder等属性，是因为我个人觉得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列CSS代码，我觉得这样的效率和效果都不好！3.CSS布局高级技巧margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：IE6.0FirefoxOpera等是真实宽度=width+padding+border+marginIE5.X真实宽度=width-padding-border-margin很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！解决的方法是hackdiv.content{width:400px;//这个是错误的width，所有浏览器都读到了voice-family:\}\;//IE5.X/win忽略了\}\后的内容voice-family:inherit;width:300px;//包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的}htmlbody.content{//htmlbody是CSS2的写法width:300px;//支持CSS2该写法的浏览器(非IE5)有幸读到了这一句}div.content{width:300px!important;//这个是正确的width，大部分支持!important标记的浏览器使用这里的数值width(空格)/**/:400px;//IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用}htmlbody.content{//htmlbody是CSS2的写法width:300px;//支持CSS2该写法的浏览器有幸读到了这一句}具体解释点击下面链接查看=114列等高技巧n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加JS脚本的方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。背景图填充法：xhtml:divid=wrapdivid=column1这是第一列/divdivid=column1这是第二列/divdivclass=clear/div/divcss:#wrap{width:776px;background:url(bg.gif)repeat-y300px;}#column1{float:left;width:300px;}#column2{float:right;width:476px;}.clear{clear:both;}就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉JS脚本法：=2453983代码的原理基本就是这样，读取高度，判断高度，高度相等。容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法这篇文章说的很详细了：还有：=151满屏高度布局（最窄770px最宽1024px经典布局）今天和一个网友两天，他提到：给一个外国公司做网站，要求1.800x600满屏。2.1024x767满屏。3.1280下居中。4.不许用JS。我突然想起了这篇文章，哈哈！把它感觉不可思议的事情解决了！但是好像对于IE5有点问题啊！参考资料：=2506047