-
head{ width:100%; height:100px; background:#ccc;} .main{width:100%;height:600px; background:#FCC;margin0 auto;} .footer{ width:100%;height:50px; background:#9CF;margin:0 auto;}查看全部
-
文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流。 有三種情況使得元素離開文檔流而存在，分別是浮動 絕對布局 固定定位查看全部
-
任務 任務1：完成頂部（top）、底部（foot）寬度自適應 任務2：中間分為2兩欄，其中，左側（left）寬度為200px， 右側（right）寬度自適應 任務3：要求右側（right）先加載，左側（left）后加載 任務4：編寫的代碼要兼容ie6查看全部
-
1.如果是要清除浮動影響的是浮動對象的父對象： 建議采用：設置父對象的overflow:hidden; 2.如果要清除浮動影響的是浮動對象后邊緊鄰的對象 建議采用：clear:both;查看全部
-
最常用混合布局 頁面上的元素是塊與塊之間的關系，存在于三種狀態： 塊挨著塊、塊嵌套著塊和塊疊壓著塊 通過CSS將塊的位置擺放正確，網頁的布局就完美查看全部
-
要求右側（right）先加載，左側（left）后加載；也就是說寫html的時候先寫right部分，<div class="right">right</div> <div class="left">left</div>。因而不能直接用float實現寬度方向的自適應，若直接用float，會出現left的頂部和foot的頂部在同一水平線上。查看全部
-
三列布局中，當左右兩列定寬，中間自適應時。需對左右兩列設定絕對定位，對中間設置左右margin值（分別為左右兩列定寬值）查看全部
-
如果是要清楚浮動影響的父元素，則可以用overflow:hidden;<br> 如果是要清除浮動影響的之后的元素，后面的元素可以設置clear：both查看全部
-
要實現三列布局寬度自適應，在左右兩列寬度固定的情況下，分別設置絕對定位position:absolute;且左列設置left：0；top:0;右列設置right:0;top:0;中間列設置margin值：0 右列寬度 0 左列寬度 ；便可實現三列布局中間列自適應查看全部
-
三列布局中，當左右兩列定寬，中間自適應時。需對左右兩列設定絕對定位，對中間設置左右margin值（分別為左右兩列定寬值）查看全部
-
可以去查閱一下overflow:hidden的作用。查看全部
-
清除浮動的一種方法：“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;} .top{height:50px;background: orange;} .main{width:800px;height:400px;background: blue;margin: 0 auto;} .left{width:300px;height:400px;background: red;float: left;} .right{width:500px;height: 400px;background: pink;float: right;} .sub_l{width: 250px;height:400px;background: yellow;float:left;} .sub_r{width: 250px;height:400px;background: green;float:left;} .bottom{width:800px;height:50px;background: purple;margin: 0 auto;} </style> </head> <body> <div class="top"></div> <div class="main"> <div class="left"></div> <div class="right"> <div class="sub_l"></div> <div class="sub_r"></div> </div> </div> <div class="bottom"></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;} .left{width:100px;height:500px;background:#666;position:absolute;top:0;left:0;} .right{width:200px;height:500px;background:#9cf;position:absolute;top:0;right:0;} .main{height:500px;background:purple;margin:0px 210px 0px 110px;} </style> </head> <body> <div class="left"></div> <div class="main">完成任務后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經掌握此技能，否則，請重復學習此節內容。如果代碼無誤，效果未出現，請拷貝到本地編輯器進行調試。</div> <div class="right"></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;} .head{ width:100%; height:100px; background:#ccc;} .main{ height:600px; background:#FCC;margin:0 auto;} .footer{ height:50px; background:#9CF;margin:0 auto;} </style> </head> <body> <div class="head">head</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>查看全部
舉報
0/150
提交
取消