-
重点，浮动查看全部
-
<!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; background:#9CF;margin: 0 310px 0 210px;} .right{ height:600px; width:300px; position:absolute; top:0;background:#FCC;right: 0;top: 0;} </style> </head> <body> <div class="left">left</div> <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
三栏 左右固定 中间自适应查看全部
-
margin:0 auto//div水平居中的方式查看全部
-
clear:both是清除样式，相当于清除浮动查看全部
-
三列布局： 左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定位：margin:0 (right宽度+间隙宽度)px 0 (left宽度+间隙宽度)px; 上右下左，左右调节大小可以紧邻，也可以有间距 .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;} margin不为0注意加单位查看全部
-
clear:both清除浮动查看全部
-
为什么前面的元素设置了浮动就要清除浮动？ +1积分 [已采纳的回答] chachakun chachakun: 应该这样理解：当块添加了浮动以后，它是脱离了原来的文档流（大致值文档结构）的，所以没有的添加的浮动的块（处于原来的文档流中）就会上去补充，所以footer就会跑到main上面。查看全部
-
兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素要设定relative才可以。 要右侧自适应，则左侧应该定宽并且position：absolute。 加载顺序先右后左div的顺序为先右后左 CSS布局笔记：<br> 1.使用margin:0 auto；使得div居中;<br> 2.使用float为left和right使得两个div处于同一行；<br> 3.使用百分比宽度实现宽度自适应，使用绝对值使得宽度固定；<br> 4.使用position:absolute实现div绝对定位，在三列布局中使得最左和最右绝对定义，中间可自适应；<br> 5.混合布局可使用嵌套的方式，在横向header、main和footer，然后在main中使用两列或三列布局。查看全部
-
CSS布局主要通过 float和 postion来设计查看全部
-
左右列固定宽度，中间列自适应。 左侧绝对定位：position：absolute;left:0;top:0; 右侧绝对定位：position：absolute;right:0;top:0; 中间宽度定位：margin:0 (right宽度+间隙宽度)px 0 (left宽度+间隙宽度)px; 上右下左，左右调节大小可以紧邻，也可以有间距 .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;} margin不为0注意加单位查看全部
-
三列布局：不能使用float，左右两列绝对定位，分别靠左和靠右，中间列为相对定位，左右margin分别设置为左右两列的宽度即可，如果列与列之间需要间隔，则增加相应的margin值。 [ 查看全文 ] 03:00看截图 http://www.imooc.com/video/774看视频查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。查看全部
-
两列布局：自适应的两列布局：width用百分比+float； 固定宽度的两列布局：width：具体值/父级元素的宽度确定，width+百分比；+float; 如果没有加float的话，不能实现并排的两列布局。 我认为（欢迎指正）： div作为外联元素独占一行，使后面的元素在下一行（设置display：inline/inline-block可以达到float效果） 另外一种设置两列布局（固定宽度+自适应宽度）的方法： position：relative——父元素：相对定位（因为不设置偏移量时，它还是在原来的位置，不影响其位置） position：absolute——子元素：绝对定位（通过设置top :0;margin/left设置其与另一边的位置使其位于同行的另一侧） 注意：固定宽度的列的高度>自适应的列的高度查看全部
-
<style type="text/css"> body{ width:100%;margin:0; padding:0; font-size:30px; color:#fff} .top{margin:0 auto; color:#ccc; background:gray;} .main{width:100%;top:0; height:800px; margin:0 auto; background:red;} .left{width:200px; background:#00f;height:800px; position:absolute;} .right{height:800px ; background:#0f0; margin-left:205px;width:80%; position:relative;} .foot{width:100%; bottom:0; margin:0 auto; colur:#ccc; background:orange;} </style>查看全部
举报
0/150
提交
取消