-
塊挨著塊 塊嵌套著塊 塊壓著塊查看全部
-
混合布局 嵌入子布局 可以在塊中增加布局查看全部
-
這個<!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; font-weight:bold} div{ text-align:center; line-height:50px} .main{ width:960px; height:600px; margin:0 auto} .left{ width:300px; height:600px; background:#ccc; float:left;}/*左浮動樣式*/ .right{ width:630px; height:600px; background:#FCC; float:right;}/*右浮動樣式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>查看全部
-
這個才是正確的<!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; font-weight:bold} div{ text-align:center; line-height:50px} .main{ width:960px; height:600px; margin:0 auto} .left{ width:300px; height:600px; background:#ccc; float:left;}/*左浮動樣式*/ .right{ width:630px; height:600px; background:#FCC; float:right;}/*右浮動樣式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>查看全部
-
<!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; font-weight:bold} div{ text-align:center; line-height:50px} .main{ width:960px; height:600px; margin:0 auto} .left{ width:300px; height:600px; background:#ccc; float:left;}}/*左浮動樣式*/ .right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮動樣式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>查看全部
-
<!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} div{ text-align:center; font-weight:bold} .main,.footer{ width:960px;margin:0 auto;} .head{ width:100%; height:100px; background:#ccc} .main{ height:600px; background:#FCC} .footer{ height:50px; background:#9CF} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
-
.top{height:100px; background:#ccc} .left{ width:200px; height:500px; background:blue; } .right{ margin-left:210px;height:500px; background:#9C9;} .foot{ height:50px; background:#F63 }查看全部
-
左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義auto，定位：margin值：margin:0 310px 0 210px; 上右下左查看全部
-
特殊三列 左為固定寬度，中間為自適應，右邊為固定寬度 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義去掉，定義為auto，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中間空一點出的話，增加margin屬性值便可以實現） 左右兩側布局固定寬度，中間部分寬度自適應。則需要采用絕對定位來實現，把左右設置為絕對定位查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流查看全部
-
左右浮動：float：left float:right 左右兩列布局，可以先設置一個父級。div寬度會被父級限制，可以設父類的寬度像素值。查看全部
-
margin：0 auto div居中 margin：0；padding：0 清除樣式查看全部
-
css網絡布局： 百度首頁：結構簡單 新浪：門戶網站，板塊構成 布局：板式布局 淘寶：電商網站，展示商品信息 特點：自適應寬度 網頁長度可無限延長 突破傳統紙媒的布局 結構：頭部 尾部 內容主題（分欄---一列布局 二列布局 三列布局 混合布局）查看全部
-
clear:both overflow:hidden 清除浮動查看全部
-
position:absolute;絕對定位 position:absolute;left:0;top:0; position:absolute;right:0;top:0; margin:0 auto; 水平居中查看全部
舉報
0/150
提交
取消