-
分欄又稱為分列 一列布局 兩列布局 三列布局 混合布局查看全部
-
頭部 內容主題部分 底部查看全部
-
兩列布局類別： 1.兩列都固定寬度； 2.兩列都自適應寬度； 3.一列固定一列自適應。（既可用float也可用絕對定位實現，float實現注意：自適應寬度的這一列無需設置浮動和寬度，且需要設置margin，以為固定寬度的那一欄預留寬度）查看全部
-
當左邊標簽設定為寬度之后，右邊標簽設定margin值就可以自適應寬度查看全部
-
自適應寬度：用浮動不可以實現，用定位方法，position absolute查看全部
-
要浮動 底部變為混合查看全部
-
混合布局 加：子div 并且定義查看全部
-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:absolute; float:left; left:0; top:0} .main{ height:600px; margin:0px 210px 0px310px;background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}查看全部
-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:absolute; float:left; left:0; top:0} .main{ height:600px; margin:0px 210px 0px310px;background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}查看全部
-
三列特殊左右側固定，中間自適應寬度。查看全部
-
自適應三列布局查看全部
-
固定寬度兩列布局查看全部
-
2列自適應查看全部
-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;} .main{width: 800px;height:600px;background-color: #ccc;margin: 0 auto} .top{height:100px;background-color: blue} .foot{width: 800px;height:100px; background-color: #900;margin: 0 auto} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部
-
clear: both;清除浮動 浮動：float:left/right查看全部
舉報
0/150
提交
取消