-
<title>混合布局</title> <style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc;float:left} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left} .r_sub_right{ width:200px; height:600px; background:#9FC; floatL:right} .footer{ height:100px; background:#9F9; clear:both; } </style> </head> <body> <div class="top"> <div class="head">head</div> </div> <div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left </div> <div class=" r_sub_right">sub_right </div> </div> </div> <div class="footer">footer</div> </body> </html>查看全部
-
清除浮动clear:both;查看全部
-
特殊的三列布局查看全部
-
float浮动和position absolute绝对定位 可以让元素脱离文档流查看全部
-
position:absolute;right:0;top:0查看全部
-
两栏用float 三栏的时候 左右两侧用position：absolute ;left:0;//right:0 中间部分用margin:0 rightwidth 0 leftwidth 去定位查看全部
-
一列布局一般都会固定宽度查看全部
-
网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 常见布局（如图）查看全部
-
三列布局：左右固定宽度值，中间自适应。此时不能浮动布局，应该使用绝对定位 .left{position:absolute;left:0'top:0} .right{position:absolute;right:0;top:0} .middle{margin值}查看全部
-
三列布局：例子： <title>三列布局</title> <style type="text/css"> body{margin:0;padding:0;font-size:30px;font-weight:bold;} div {text-align:center;line-height:50px;} .left{width:200px;height:600px;background:#ccc;position:absolute;left:0;top:0;} .middle{height:600px;background:#fcc; margin:0px 310px 0 210px;} .right{width:300px;height:600px;background:blue;position:absolute;right:0;top:0; } </style> </head> <body> <div class="left">200px</div> <div class="middle">月明星稀，乌鹊南飞’，此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”）</div> <div class="right">300px</div> </body> </html>查看全部
-
三列，前两个float:left;最后一个float:right 或着都float:right查看全部
-
浮动（float）和 绝对定位（position：absolute）可以让元素脱离文档流. 文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)查看全部
-
自适应宽度的width用百分比； 固定宽度的两列布局：父级div包含两个子div;使用float左右浮动；宽度此时用具体数字不用百分比；查看全部
-
一列布局通常用于首页； 让div居中：margin:0 auto; 2. 典型单列布局：头部top 主体main 尾部foot 三个<div> 3. 清除默认样式：;body{margin:0;padding:0} 4. margin的顺序是上右下左，那么这里的0表示上方的为0，上方的对应部位也就是下方也为0.同理auto指的是右方，那么对应的左方也为auto。查看全部
-
清除浮动使用clear:both.查看全部
举报
0/150
提交
取消