-
布局有一列、二列、三列和混合布局 混合布局： 将一列布局改造就变成了混合布局。 即主体部分加上子div 要点回顾： 其实在网页制作当中，页面中的元素就是块与块之间的关系： 块挨着块；块嵌套着块；块叠压着块 通过css将这些块摆放正确，网页布局就自然完美了。 1、margin:0 auto 自动居中 2、两种分成三栏的方式： 1）两边position：absolute，left：0/right：0，top:0， 中间margin｛0 右边 0 左边｝ 2）先分两栏 左右float 再分两栏左右float查看全部
-
三列布局：不能使用float,左右两列绝对定位，分别靠左和靠右。中间列布局的左右margin分别设置为左右两列的宽度即可，如果列与列之间需要间隔，则增加相应的margin值。查看全部
-
1.要兼容IE6，所以尽量不要使用float，用绝对定位或者相对定位就可以了 2.在这里先加载的意思就是把right写在前面的div，left写在后面的div查看全部
-
？？ 1. 因为main中的两个DIV，left和right都设置了浮动，导致main这个DIV没有被撑开，缩成了一个点在top这个DIV下面，根据我的测试，解决办法有两个，第一个是给footer设置清除浮动clear:both。第二种给main这个DIV设置一个height:600px ，这样与left、right这两个DIV高度一致，这样就撑开了main这个DIV，效果也就出来了。 2. 如果不清除浮动，float的元素是脱离了文档流，那么这个元素原来在文档流里的位置不会被继续保留，就会被后来的元素所替代。这个例子中，float的元素的高度要比后来的元素即footer的高度要高，所以footer会被float的元素覆盖了，如果你把float的元素高度设置的比footer小一点，你就可以看到footer显出了部分绿色。 那么如果footer的样式中添加clear的作用是，保留原来float元素在文档流中的位置，这样footer元素就不会去替代float元素所在的位置了。 3. overflow：hidden的意思是超出部分不显示，就是假如你的div是300*400的，但在里面插入一张400*500的图片，图片就会跑出那个div里面，用了这个属性和属性值后，图片超出300*400这个范围的内容不显示出来。而clear：both仅仅只是清除左右两边的浮动而已查看全部
-
**混合布局 通过将一列布局的中间模块加上俩子模块改为2列，然后又将每一列加上子模块往下分查看全部
-
三列布局 两边固定，中间自适应： .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; background:#FCC;}绝对定位在右侧查看全部
-
两列布局 两列自适应布局： 1.一个模块设置width：20%，另一模块width:80%(加起来为100%) [不设置宽度就是自适应宽度] 2.设置浮动float，一个为left，一个为right。 定宽两列布局 还可以给两个模块增加一个父级模块，如果给父级模块设置宽度width：500px，那么这两个模块的宽度就为500px，也可将两个子模块的宽度width设为300px和200px，加起来为500px即可。 设置父级margin：0 auto； 可以使两个定宽模块居中。查看全部
-
一列布局： margin:0 auto;是块状元素的居中对齐方式， text-align:center;是内联元素（如，a,img标签)的对齐方式， *bod{padding:0;margin:0;}是做为初始化页面，清除默认样式。（原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.）查看全部
-
margin:0 auto;是块状元素的居中对齐方式，text-align:center;是内联元素（如，a,img标签)的对齐方式，padding:0;margin:0;是做为初始化页面，原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除.查看全部
-
1.要兼容IE6，所以尽量不要使用float，用绝对定位或者相对定位就可以了 2.在这里先加载的意思就是把right写在前面的div，left写在后面的div查看全部
-
margin:0 auto 水平居中查看全部
-
1. 因为main中的两个DIV，left和right都设置了浮动，导致main这个DIV没有被撑开，缩成了一个点在top这个DIV下面，根据我的测试，解决办法有两个，第一个是给footer设置清除浮动clear:both。第二种给main这个DIV设置一个height:600px ，这样与left、right这两个DIV高度一致，这样就撑开了main这个DIV，效果也就出来了。 2. 如果不清除浮动，float的元素是脱离了文档流，那么这个元素原来在文档流里的位置不会被继续保留，就会被后来的元素所替代。这个例子中，float的元素的高度要比后来的元素即footer的高度要高，所以footer会被float的元素覆盖了，如果你把float的元素高度设置的比footer小一点，你就可以看到footer显出了部分绿色。 那么如果footer的样式中添加clear的作用是，保留原来float元素在文档流中的位置，这样footer元素就不会去替代float元素所在的位置了。 3. overflow：hidden的意思是超出部分不显示，就是假如你的div是300*400的，但在里面插入一张400*500的图片，图片就会跑出那个div里面，用了这个属性和属性值后，图片超出300*400这个范围的内容不显示出来。而clear：both仅仅只是清除左右两边的浮动而已查看全部
-
<!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; color:#fff} .top{width:100%;height:100px;background:#ccc;} .main{background:#f00;height:500px;} .left{width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;} .right{margin-left:210px;background:rgb(154,204,153);height:100%;} .foot{width:100%;height:50px;background:#F63;clear:both;} </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.clear:both 2.overflow:hidden查看全部
-
<!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; position:absolute;top:0px;left:210px;right:310px background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
举报
0/150
提交
取消