-
上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。 解决方法有两个：1.清除浮动， clear:both; 2.为main设置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三列布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0;position:absolute; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行； 你可以尝试把clear:both语句清除，然后定义如下的样式 .main{height:600px;}；把main的高度加上，那么浏览器也会正确显示的查看全部
-
.left{ width:200px; height:600px; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310 0 210; } .right{ height:600px; width:300px; position:absolute; top:0;right:0; } //main为自适应宽度，left和right是自定义的固定高度查看全部
-
margin:0 auto; 起水平居中作用 0代表垂直方向的，auto，代表左右方向的查看全部
-
body{margin:0;padding:0}清楚默认设置查看全部
-
三列布局：两边固定宽度，中间自适应模式：两边宽度设置固定像素，绝对定位。中间通过设置margin的上下左右值来实现。查看全部
-
清除浮动样式clear：both；查看全部
-
overflow：hidden的意思是超出部分不显示，就是假如你的div是300*400的，但在里面插入一张400*500的图片，图片就会跑出那个div里面，用了这个属性和属性值后，图片超出300*400这个范围的内容不显示出来。而clear：both仅仅只是清除左右两边的浮动而已查看全部
-
考验布局的综合能力查看全部
-
****** overflow：hidden的意思是超出部分不显示，就是假如你的div是300*400的，但在里面插入一张400*500的图片，图片就会跑出那个div里面，用了这个属性和属性值后，图片超出300*400这个范围的内容不显示出来。而clear：both仅仅只是清除左右两边的浮动而已查看全部
-
混合布局，中间两列，左边固定，右边自适应，使用父元素相对定位，子元素绝对定位。 <html> <head> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff } .top{ height:100px; background:#ccc; } .main{ height:500px; background:red; } .left{ width:200px; height:500px; background:blue; float:left; position:absolute; } .right{ position:absolute; left:210px; right:0; height:500px; background:#9c9; } .foot{ height:50px; background:#F63; } </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
1、margin:0 auto; /* 使div在浏览器中水平居中 */ float:left; /* 使div左浮动 */ float:right; /* 使div右浮动 */ clear:both; /* 清除浮动 */ 2、为何一定要清除浮动呢？ div是块状元素，它会很霸道的占一行，从代码可以看出啊，整个的main内容块没有指定高度的，只有它的子内容块指定了高度，但是它的子内容块是浮动的，所以子内容块的高度不能影响成为main的高度，那么浏览器就默认了把footer的div显示在top的下一行，这个时候添加clear:both清除了上面模块的浮动特性，那么此时main的高度就是和子内容块的高度是一样的，因此浏览器就会把footer的div显示在main的下一行 清除浮动两种方法：1. clear:both; 2. overflow:hidden.查看全部
-
1、一列布局：margin：0 auto 两列布局：左右浮动<br> 三列布局：二列布局基础上，左右绝对定位，中间靠margin调整位置 混合布局：在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局 2、混合布局 （1）在一列布局的基础上，将中间main部分改成两列 （2）在二列布局的基础上，将中间main部分改成三列 （3）在三列布局的基础上，将顶部top部分嵌入一个区域 3、要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块、块嵌套着块和块叠压着块 通过CSS将这些块摆放正确，网页布局就自然完美了。查看全部
-
三列布局的特殊案例（自适应宽度） 要求：三列，左边浮动200px，右边浮动300px position:absolute; left:0;top:0; margin:0 300px 0 200px; position:absolute; right:0;top:0;查看全部
举报
0/150
提交
取消