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