-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:abs0lute; 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;}查看全部
-
二列自適應布局 1.在body中設定兩個標簽：<div class="left>,<div class="right">. 2.要設置左右浮動：float:left;寬度比例：width:數字%. 3.body{margin:0;padding:0}解決瀏覽器不兼容，清除邊距。 4.標簽里有正副極，就是下面的樣式聽從上面的樣式，受到第一副極限定。 5.要確定設置寬度要用到像素px,而不是百分比查看全部
-
<!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>111</title> <style type="text/css"> body{margin:0; padding:0; font-size:30px;background-color:#fff} .top{width:100%;height:60px;background-color:#B743FA;} .main{height:500px;background-color:#FA4343;position:relative; } .left{width:200px;height:500px;position:absolute;left:0;top:0;background-color:#43FAFA;} .right{margin-left:210px;height:500px;background-color:#4EFA43;} .foot{width:100%;height:50px;background-color::#E8FA43;} </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>查看全部
-
三列布局。 .left{ width:200px; height:600px; background:#ccc;position:abs0lute; 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;}查看全部
-
<!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;font-weight:bold;} div{text-align:center;line-height:50px;} .top{width:100%;height:100px;background:#ccc;} .main{height:500px;background:#f00;} .left{width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;} .right{margin-left:210px;height:500px;background:green;} .foot{width;100%;height:50px;background:#f90;clear;both;} </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>查看全部
-
用百分百控制網頁自適應寬度查看全部
-
定義好大塊相對定位，小塊絕對定位，用了position：absolute； relative 不用float浮動；查看全部
-
<!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{margin:0 auto;background:#999999;} .main{background:red;height:500px;margin:0 auto; position:relative; } .left{height:500px;width:200px;background:blue; position:absolute; top:0; left:0;} .right{height:500px;background:#222222;margin:0 0 0 210px; } .foot{margin:0 auto;background:#345345;clear:both;height:200px;} </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> </head> <body> <div class="top"> <div class="head"></div> </div> <div class="main"> <div class="left"> </div> <div class="right"> <div class="sub_l"> </div> <div class="sub_r"> <div class="sub_r_sub"></div> <div class="sub_r_infer"></div> </div> </div> </div> <div class="foot"></div> </body> </html>查看全部
-
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>單列布局</title> <style type="text/css"> body{margin:0;padding:0} .top{height:100px;background-color:blue} .head{height:100px;width:800px;background:#f60;margin:0 auto;} .main{width:800px;height:600px;background:#ccc;margin:0 auto;} .left{width:200px;height:600px;background:yellow;float:left;} .right{width:600px;height:600px;background:#369;float:right;} .sub_l{width:400px;height:600px;background:green;float:left;} .sub_r{width:200px;height:600px;background:#09F;float:right;} .sub_r_sub{width:200px;height:200px;background:pink:} .sub_r_infer{width:200px;height:400px;background:red} .foot{width:800px;height:100px;background:#900;margin:0 auto;} </style> </head>查看全部
-
3列布局-特殊案例 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義去掉，定義為auto，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中間空一點出的話，增加margin屬性值便可以實現） 左右兩側布局固定寬度，中間部分寬度自適應。則需要采用絕對定位來實現，把左右設置為絕對定位查看全部
-
二列自適應布局 1.在body中設定兩個標簽：<div class="left>,<div class="right">. 2.要設置左右浮動：float:left;寬度比例：width:數字%. 3.body{margin:0;padding:0}解決瀏覽器不兼容，清除邊距。 4.標簽里有正副極，就是下面的樣式聽從上面的樣式，受到第一副極限定。 5.要確定設置寬度要用到像素px,而不是百分比查看全部
-
<!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>查看全部
-
margin: 0 auto; 實現自動居中查看全部
-
<!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>查看全部
舉報
0/150
提交
取消