-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 可以讓元素脫離文檔流的兩個CSS設置：浮動（float）和絕對定位（position：absolute）查看全部
-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達信息的同時有美感。 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長 一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。常見分欄方式：一、二、三、列布局，混合布局查看全部
-
1.清除浮動方式： clear:both overflow:hidden 2.這里是一個排版陷阱：當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，不代表它不存在。查看全部
-
任務1：完成頂部（top）、底部（foot）寬度自適應 任務2：中間分為2兩欄，其中，左側（left）寬度為200px， 右側（right）寬度自適應 任務3：要求右側（right）先加載，左側（left）后加載 任務4：編寫的代碼要兼容ie6 .top{width:100%;height:50px;background-color:gray;} .main{width:100%;height:500px;background-color:red;} .left{ width:200px;height:500px;background-color:blue;float:left;} .right{width:100%;height:500px;background-color:green;float:right; position:absolute;right:0px; left:210px} .foot{width:100%;background-color:#ccc} .top{width:100%;height:100px;background-color:#ccc;} .main{width:100%;background-color:red;position:relative;} .left{ height:600px;width:200px;left:0;top:0;background-color:blue; position:absolute;} .right{height:600px;background-color:#9ACC99;margin-left:210px;} .foot{width:100%; height:60px; background-color:#FF6534;}查看全部
-
清除浮動有兩種方法：1.clear:both 2.overflow:hidden查看全部
-
塊挨著塊 塊嵌套著塊 塊疊壓著塊 通過CSS把這些快的位置擺放正確 網頁就完美了！查看全部
-
3列布局-特殊案例 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義去掉，定義為auto，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中間空一點出的話，增加margin屬性值便可以實現） 左右兩側布局固定寬度，中間部分寬度自適應。則需要采用絕對定位來實現，把左右設置為絕對定位查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流查看全部
-
混合布局： 將一列布局改造就變成了混合布局。 中間主體部分加上子div 要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊，這里如果是三列的話，視頻里面是將right當成一個大塊，里面再包含兩個小塊，分別左右浮動處理。【應該可以不用設置右側為一個大塊，直接再加一個塊，然后浮動設置好就可以了?！?通過css將這些塊擺放正確，網頁布局就自然完美了。查看全部
-
視頻中的特例也可以采用另一種方式，把Middle塊放在right之后，就是left、right、Middle。然后設置left左浮動，right右浮動。 <html> <head></head> <style type="text/css"> body{ margin: 0; padding: 0; } #left{ background: #ccc; width: 200px; height: 500px; float: left; } #right{ background: red; width: 200px; height: 500px; float: right; } #middle{ background: yellow; } </style> <body> <div id="left">left</div> <div id="right">right</div> <div id="middle">middle</div> </body> </html>查看全部
-
三列布局，1.三列自適應，同前面兩列布局，設置width，以及float，（視頻里面的特殊例子【要求left和right固定width px，中間自適應】視頻采用left設置position：left，rightposition：right，中間middle設置margin左右，沒有設置width，說明width是auto的）查看全部
-
兩列布局：1、寬度自適應（用的比較少），1.1因為寬度要自適應，所以要設置左側left的width:xx%；1.2，需要左右排列，所以設置float:left；1.3另一側right也設置width和float(left和right都可以吧，再微調) 2、固定寬度（☆☆☆☆☆）left和right增加一個父div#main,設置這個main的width，以及margin 0 auto；2.1如果要精確控制left和right的寬度，可以使用px【就是說也可以使用%粗略控制?！?查看全部
-
一列布局，一般是1.固定寬度的。2.設置margin:0 auto查看全部
-
混合布局： 將一列布局改造就變成了混合布局。 主體部分加上子div 要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊 通過css將這些塊擺放正確，網頁布局就自然完美了。查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流查看全部
舉報
0/150
提交
取消