-
...查看全部
-
两列固定布局（不是自适应）查看全部
-
两列布局，float：left让这列布局浮动到左侧查看全部
-
一列布局，加了margin：0 auto 使得图片水平居中查看全部
-
三栏布局查看全部
-
三列布局的时候，如果左右是float left和float right，那么实际上会分成三行排列。实际要用，左边 position：absolute，右边position：absolute，中间用margin：0 右边一列的宽 0 左边一列的宽。那么中间就是自适应的。ps：margin中还可以左右宽上再额外加一些像素，多一些空白查看全部
-
自适应宽度布局用width用%，一般用固定大小布局。查看全部
-
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 浮动（float）和 绝对定位（position：absolute）-->脱离文档流 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position：absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
我不知道任务里说的先右侧加载后左侧加载时什么意思，反正能达到效果的话，能不用浮动与定位的就尽量不用，至于要兼容ie6，估计是因为float还是比较潮的吧，反正ie你们知道的咯查看全部
-
<!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:200px; background:gray;} .main{ width:100%; height:960px; background:yellow; position:relative;} .left{ width:200px; height:960px; background:blue; position:absolute; left:0px; top:0px;} .right{height:960px;background:#9ACC99;margin:0 0 0 210px;} .foot{width:100%; height:150px; background:orange; 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> <!--xxxx--> 兼容IE6不能用浮动，而且当子元素要设定为absolute的时候，父元素要设定relative才可以。 要右侧自适应，左侧应该定宽并且position：absolute。 加载顺序先右后左div的顺序为先右后左查看全部
-
清楚浮动的方法： 一：clear:both(/left/right); 二：overflow:hidden;width:100%; 三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;} 四：margin:600px 0 0 0; <!--xxxxxxxxxxx--> 因为main包含的块全都设置了浮动，而浮动和绝对定位会使块脱离标准文档流，但是head仍在文档流中 所以foot会忽略main的所有块而贴着head块 方法1： .main{ width:860px;height:600px;margin:0 auto;background:#9FC;} 方法2：.footer{ height:50px; background:#9F9; margin:600px 0 0 0;} 方法3：.footer{width:100%; height:50px; background:#9F9; position:absolute;top:700px;}查看全部
-
<!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; } 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{ width:300px; height:600px; background:#FCC; position:absolute; right:0; top:0; } </style> </head> <body> <div class="left">left 200px</div> <div class="main">设计首固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div> <div class="right">right 300px</div> </body> </html> 一列布局：普通，居中即可（左右margin为auto） 二列布局：float：left和float：right即可 三列布局： 1.全部自适应：margin=33.33%，并全部设置为float 2.左右固定，当中自适应：左右position：absolute；当中margin定死(手动写左右margin=左右栏宽)查看全部
-
顶部宽度自适应，因此宽度为100%，同理底部查看全部
-
clear:both 清除浮动查看全部
-
.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;} 代码解读：对于main中margin第一个参数是对顶部，第二个是对右侧，310px正好比right宽多了10px，同理第三个对下面为0，第四个对左边为210，比left宽200多10px；另外位置问题，如right中，position:absolute; top:0; right:0，位置是绝对的，对右为0 ，对上为0查看全部
举报
0/150
提交
取消