-
footer 的色塊已經跑到了上面，只有文字在下面，之所以會跑走，是因為上面的元素用了浮動，原來的位置就空了出來，然后 footer 沒有浮動元素，又沒有清除浮動，就占據了中間位置，所以，想讓footer 在他自己的位置，就先清除浮動（clear：both）
查看全部 -
自適應寬度
長度無限制
查看全部 -
一列布局：margin:0 auto;? 居中
二列布局：float:left; ? float:right;? 浮動
三列布局：position:absolute; top:0; left:0;? 絕對位置
查看全部 -
429..
查看全部 -
混合布局.
查看全部 -
三列布局。
查看全部 -
二列布局。
查看全部 -
一列布局。
查看全部 -
混合布局。
查看全部 -
這里是一個排版陷阱：當main里面設置了左右兩個div之后，這個時候不要忘記給main也設置和左右div一樣的高度，題中的main是沒有設置高度的，只設置了寬度，這個時候我們可以想象main其實就是一根高度為0的線條浮在top的下面，只是我們看不到，因為它沒有高度。而footer是浮在main下面的，并不是浮在左右兩個div下面，所以我們看到footer塊莫名其妙跑上來蓋住了左右兩個div，解決辦法如下： 第一，給main賦予和左右div同樣大小的高度，這個是最直接的方法，main的高度從0變成600px之后，自然把以它為參照、浮在它屁股下面的footer壓到下面去了； 第二，把footer的浮動清除掉，使用clear：both，這樣footer從一個跟著main浮起來的飛行物變成了失去翅膀的元素，不能浮動，它就只能自動找最長的參照物（也就是很長的左右div），然后折行顯示在底部了，一樣能達到效果。 如果還不懂，可以將main的高度設置為height：300px，就一目了然了，因為這個時候main變成了300px，而footer會跟著main低300px顯示在top下面。我們看不到main，不代表它不存在。
查看全部 -
3列布局-特殊案例 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中間空一點出的話，增加margin屬性值便可以實現） 左右兩側布局固定寬度，中間部分寬度自適應。則需要采用絕對定位來實現，把左右設置為絕對定位
查看全部 -
兩列布局利用到了float：left/right 屬性 1.自適應，用百分比%分配寬度，當拖動瀏覽器窗口時，按設置做相應變化，此方法比較少用 2.固定寬度，用px明確指定寬度， 限制左右在父級框中 .main{} .left{float:left;} .right{float:right;} <div class="main">
查看全部 -
margin:0 auto;是塊狀元素的居中對齊方式， text-align:center;是內聯元素（如，a,img標簽)的對齊方式， padding:0;margin:0;是做為初始化頁面， 原因是頁面在被各個瀏覽器讀取時的理解不同產生不同的展示效果，所以需要清除.
查看全部 -
1.一列布局不適于存放文本，太長容易看走眼 一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。 ------------------------------ <!DOCTYPE html> <html> <head> <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>
查看全部 -
一列布局
????????元素水平居中: 該id或calss上添加margin:0 auto;
查看全部 -
1.布局概念：又叫做版式布局，ui設計師把視覺元素進行排列組合。
2.網頁設計特點：網頁可以自適應寬度。
3.分欄又稱分列，常見的布局分為：
?一列布局
二列布局
三列布局
混合布局? ?????????
4.前端：如何通過基礎手段靈活運用css中的浮動，定位等方法完成設計圖中的設計要求。
查看全部 -
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:gray;top:0;}//不設置width保證自適應，定義位置
.main{height:600px;background:red;}//主題高度及顏色設置
.left{width:200px;height:600px;background:blue;position:absolute;left:0;}//主體左邊，左絕對定位0（貼左）
.right{height:600px;background:green;position:absolute;left:210px;right:0;}///主體右邊，左絕對定位210，右絕對定位0（貼右），不設置寬度保證自適應
.foot{height:100px;background:orange;bottom:0;}//不設置width保證自適應，定義位置
</style>
查看全部 -
clear:both 清楚浮動的代碼
查看全部 -
右側哪兩個 css 設置，可以讓元素脫離文檔流:浮動和絕對定位{浮動（float）和 絕對定位（position：absolute）}
查看全部 -
Div{width:800px; height:500px; margin:0 auto}，上面這段樣式，可以讓 div 在頁面的：居中對齊
查看全部 -
三列布局
【1】左右列固定寬度，中間列自適應。 【2】左側絕對定位：寬；高；position：absolute;left:0;top:0; 【3】右側絕對定位：寬；高；position：absolute;right:0;top:0; 【4】中間寬度定位：高；margin:0 (right寬度+間隙寬度)px 0 (left寬度+間隙寬度)px; 上右下左，左右調節大小可
(不用float因為有的塊會被頂到下列，用絕對定位不會)
查看全部 -
clear:both 清楚浮動的代碼
查看全部
舉報