-
1、頂部和底部寬度自適應一般將其設置寬度為百分比,例如width:100% 2、多列中，其中一列需要寬度自適應，不需要加寬度（width）。只需要設置margin值 3、塊的加載順序由HTML代碼編寫順序決定查看全部
-
float 和 position absolute可以讓元素脫離文檔流查看全部
-
三列布局查看全部
-
常見布局查看全部
-
自己操作查看全部
-
float 和 position absolute可以讓元素脫離文檔流查看全部
-
1.一列布局不適于存放文本，太長容易看走眼 一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。 兩列布局自適應，使用百分比。查看全部
-
三列布局查看全部
-
margin：0上下方向的auto左右方向的查看全部
-
clear:both;清除浮動查看全部
-
<!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;height:60px;} .main{background:red;height:500px;position:relative;} .left{width:200px;position:absolute;top:0;left:0;background:blue;height:100%;} .right{margin-left:210px;background:rgb(154,204,153);height:100%;} .foot{height:60px;background:rgb(255,102,52);} </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>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>混合布局編程挑戰</title><br> <style type="text/css"><br> body{ margin:0; padding:0; font-size:30px; color:#fff}<br> .top{height:100px;background:#ccc;}<br> .main{height:800px;background:red;}<br> .left{width:200px;height:800px;background:blue;position:absolute;top:100px;left:0;}<br> .right{height:800px;background:#0c6;margin-left:210px;}<br> .foot{height:50px;background:#f90;}<br> </style><br> <br> </head><br> <br> <body><br> <div class="top">top</div><br> <div class="main"><br> <div class="right">right</div><br> <div class="left">left</div><br> </div><br> <div class="foot">foot</div><br> <br> </body><br> </html>查看全部
-
浮動（float）和絕對定位（position:abdsolute）：讓元素脫離文檔流。查看全部
-
元素在文本流中會占用空間，脫離文本流以后，會在z軸的另外一層顯示，原先的空間被其他元素占據。查看全部
-
<!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;margin:0 auto;background:#ccc;} .main{height:800px; width:600px;background:#ff0000;margin:0 auto;} .right{float:right;height:800px;width:66%;background:#00ff00;} .left{float:left; height:800px; width:33%;background:#0000ff;} .foot{height:50px;background:#ff8000;} </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>查看全部
舉報
0/150
提交
取消