-
中間自適應 左右固定 中間無width 不能用float 用絕對定位查看全部
-
三列 自適應布局查看全部
-
兩列 固定布局查看全部
-
兩列 自適應的布局查看全部
-
CSS中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。 需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。 所以 用 clear :both:清除浮動 是footer這個盒子 不會緊跟在 top盒子之后，而是跟在main之后。查看全部
-
三列布局： 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定位：margin:0 (right寬度+間隙寬度)px 0 (left寬度+間隙寬度)px; 上右下左，左右調節大小可以緊鄰，也可以有間距 .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;} margin不為0注意加單位查看全部
-
<style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;margin:0 auto} .main{width:800px;height:600px;background:#900;margin:0 auto} .left{ width:200px;height:600px;background:blue;} .right{width:73%;height:600px;background:#f00;position:absolute;margin:0 0 0 210px;} .foot{height:100px;background:#333;margin:0 auto} </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>查看全部
-
<!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{height:100px;background:#ccc;margin:0 auto} .main{width:800px;height:600px;background:#900;margin:0 auto} .left{ width:200px;height:600px;background:blue} .right{height:600px;background:#f00;float:right;} .foot{height:100px;background:#333;} </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>查看全部
-
<style> body{ margin:0; padding:0; font-size:30px; color:#fff; } .top{ width:100%; height:100px; background:#ccc; } .main { height:150px; background:red; } .left { width:150px; height:150px; background:blue; position:absolute; left:0; top:100px; } .right { height:150px; background:#099; margin-left:155px; } .foot { background:orange; height:50px; width:100%; } </style>查看全部
-
CSS中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。 需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。 所以 用 clear :both:清除浮動 是footer這個盒子 不會緊跟在 top盒子之后，而是跟在main之后。查看全部
-
三列布局： 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定位：margin:0 (right寬度+間隙寬度)px 0 (left寬度+間隙寬度)px; 上右下左，左右調節大小可以緊鄰，也可以有間距 .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;} margin不為0注意加單位查看全部
-
position: absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 relative 生成相對定位的元素，相對于其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 inherit 規定應該從父元素繼承 position 屬性的值。查看全部
-
float:left ->左浮動(定義元素在哪個方向浮動) float:right ->右浮動 text-align:left; -> 文字的對齊是左對齊查看全部
-
兩列布局： 1、寬度自適應（用的比較少）， 1.1因為寬度要自適應，所以要設置左側left的width:xx%； 1.2需要左右排列，所以設置float:left； 1.3另一側right也設置width和float(left和right都可以吧，再微調) 2、固定寬度（☆☆☆☆☆）left和right增加一個父div#main,設置這個main的width，以及margin 0 auto； 2.1如果要精確控制left和right的寬度，可以使用px【就是說也可以使用%粗略控制?！?查看全部
-
.main margin:0 auto水平居中查看全部
舉報
0/150
提交
取消