-
混合布局3，查看全部
-
混合布局2，中間三列查看全部
-
混合布局1查看全部
-
三列布局，左邊position：absolute;left：0；top：0；右邊position：absolute；right：0；top：0； 中間margin：0 310px 0 210px;查看全部
-
通過css的浮動float 、定位position（靜態定位static、相對定位relative、絕對定位absolute）查看全部
-
左右布局查看全部
-
多列布局。 左右都定寬，中間寬度自適應。 .left{position:absolute;left:0;top:0;width:100px;} .center{margin:0 200px 0 100px;} .right{position:absolute;right:0;top:0;width:200px;}查看全部
-
<!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{width:100%; height:100px; background:#999; margin:0 auto;} .main{height:800px; background:red; position:relative;} .left{width:200px; height:800px; background-color:#456; position:absolute;left:0;top:0px; } .right{height:800px; background-color:#110; margin-left:210px; } .foot{width:100%; height:50px; background:#222; 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> </html>查看全部
-
<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;【任務1】}}/*左浮動樣式*/ .right{ width:660px; height:600px; background:#FCC; float:right;【任務2】}/*右浮動樣式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body>查看全部
-
浮動（float）和 絕對定位（position：absolute）可以讓元素脫離文檔流查看全部
-
三列布局 ，左右兩塊定寬， 中間自適應 假設: 左200px;position:absolute;left:0;top:0; 右300px;position:absolute;right:0;top:0; 那么中間：margin:0 300px 0 200px;查看全部
-
1.使用margin:0 auto；使得div居中; 2.使用float為left和right使得兩個div處于同一行； 3.使用百分比寬度實現寬度自適應，使用絕對值使得寬度固定； 4.使用position:absolute實現div絕對定位，在三列布局中使得最左和最右絕對定義，中間可自適應； 5.混合布局可使用嵌套的方式，在橫向header、main和footer，然后在main中使用兩列或三列布局。 6.寬度自適應，左側固定寬度右側自適應，父盒子position:relative;左側子盒子position:absolute;右側margin-left。查看全部
-
position查看全部
-
eee查看全部
-
eeee查看全部
舉報
0/150
提交
取消