-
<!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:50px;background:pink;} .main{width:100%;height:600px;background:red;} .left{width:200px;height:600px;position:absolute;top:50px;background:blue;text-align:left;} .right{height:600px;margin-left:210px;background:yellow;text-align:left;} .foot{width:100%;height:30px;background:orange;} </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>查看全部
-
百分比适用于自适应查看全部
-
width:100%; overflow:hidden; /*width和overflow清除浮动*/查看全部
-
HTML+CSS 浮动定位（float）和绝对定位（position：absolute）可以让元素脱离文档流。查看全部
-
1：网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通过 浮动和定位来完成(实现ui界面效果查看全部
-
左浮动float：left； 右浮动float：right；查看全部
-
兼容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中使用两列或三列布局。查看全部
-
position:absolute;绝对定位查看全部
-
排版陷阱：当main里面设置了左右两个div之后，要给main也设置和左右div一样的高度，题中的main是没有设置高度的，只设置了宽度，可以想象main其实就是一根高度为0的线条浮在top的下面，只是我们看不到，因为它没有高度。而footer是浮在main下面的，并不浮在左右两个div下面，所以看到footer块莫名其妙跑上来盖住了左右两个div，解决：<br> 第一，给main赋予和左右div同样大小的高度,main的高度从0变成600px之后，自然把以它为参照、浮在它屁股下面的footer压到下面去了；<br> 第二，把footer的浮动清除掉，使用clear：both，clear：both只是清除左右两边的浮动而已。 如果还不懂，可以将main的高度设置为height：300px，就一目了然了，因为这个时候main变成了300px，而footer会跟着main低300px显示在top下面。我们看不到main，不代表它不存在。<br> 3、overflow：hidden的意思是超出部分不显示，假如你的div是300*400的，在里面插入一张400*500的图片，图片就会跑出那个div里面，超出300*400这个范围的不显示。<br> .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; float:right;} .footer{ height:50px; background:#9F9;clear:both;}查看全部
-
<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; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} </style>查看全部
-
浮动（float）和 绝对定位（position：absolute）可以让元素脱离标准文档流。 margin:0;padding:0; 清除默认样式 float 浮动样式 background 背景颜色 position:relative; 相对定位 position:abbsolute; 绝对定位 不可以脱离文本流 文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素 使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位 不脱离文档流就只有三种情况：块级、行内和相对定位 总结脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位，需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，单其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子的文本都会无视它。查看全部
-
宽度自适应布局查看全部
-
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。当在未给footer设置clear属性时，因为main块脱离文档的普通流，footer块就前进到了head块的下面；而因为浮动会导致行框被缩短，main块浮动后，行框缩短，footer块中的文字就处于mian浮动块后，这样footer块和footer块中的文本就分离了，所以要设置clear属性，让footer块和footer块中的文本同时处于mian浮动块后。查看全部
-
margin:0;padding:0; 清除默认样式 float 浮动样式 background 背景颜色 position:relative; 相对定位 position:abbsolute; 绝对定位 不可以脱离文本流查看全部
-
margin:0 auto 水平居中 width 宽度 height 高度查看全部
举报
0/150
提交
取消