-
<!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{background:#ccc;} .main{height:600px; background:red;} .left{ width:200px;background:blue;height:600px;} .right{float:right;} .foot{margin-bottom:0;background:yellow;} </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>查看全部
-
margin:0 310px 0 210px <!-- px不能漏掉 -->查看全部
-
左侧.left使用绝对定位position:absolute;，参照物为.main，所以在.main加position:relative;增加height:600px;width:200px; 由于左侧使用绝对定位，已脱离文档流，即右侧默认层叠在左侧下方，只需设置height:600px;和margin-left:210px边界； HTML加载方式由上而下，右侧div代码放在左侧div代码上方，已默认。查看全部
-
三列布局 填充自适应宽度 X Y Z为变量 X+Y+Z=100 .divleft {float:left;width:X%} .divmiddle {float:left;width:Y%} .divright {float:right;width:Z%} 三列布局中部自适应宽度 .divleft {width:Xpx;position:absolute;top:0;left:0;} .divmiddle {margin:0px Ypx 0px Xpx;} .divright {width:Ypx;position:absolute;top:0;right:0;}查看全部
-
布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合查看全部
-
挤出命令感觉不错查看全部
-
记不住查看全部
-
main要记得写position:relative; 这样left的绝对定位就是相对于main了，不然是相对于body查看全部
-
那就是输入数字或者纯字母了，因为一串数字或者一串字母是被当做一个整体的，所以浏览器默认不会破坏它的完整性所以不会换行，想换行的话需要增加这个属性word-wrap: break-word;就可以了查看全部
-
auto前不要分号不要分号查看全部
-
clear:both 这个div两旁不会出现其他东西。独占一行查看全部
-
Css--ui工程师将理性的思维个性化的表现出来查看全部
-
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。 而position:relative 不可以脱离文档流查看全部
-
mark查看全部
-
clear: both 清除浮动查看全部
举报
0/150
提交
取消