-
<!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
提交
取消