-
混合布局： 將一列布局改造就變成了混合布局。 主體部分加上子div 要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊 通過css將這些塊擺放正確，網頁布局就自然完美了。 1、margin:0 auto 自動居中 2、兩種分成三欄的方式： 1）兩邊position：absolute，left：0 top：0 right：0 中間margin｛0 右邊 0 左邊｝ 2）先分兩欄 左右float 再分兩欄左右float查看全部
-
題目要求：main水平居中在瀏覽器中央，并且與左右div有10px的間距 210px=左部分的寬度200px+10px間距 .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} 310=右部分的寬度300px+10px間距 .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} 如果左外邊距小于200px，右外邊距小于300px，main和左右兩邊就沒有間距了，甚至main中的部分內容會被遮蓋掉，當然，左大于200px,右大于300px,可以看到效果的。但是也不要把數值設太大。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義auto，定位：margin值：margin:0 10px 0 10px; 上右下左查看全部
-
三列布局，左右兩側固定寬度，中間自適應的參考做法： 左邊：position:absolute;left:0px;top:0px;width:200px; 中間：設置外邊距： margin:0 305px 0 205px; 右邊：position:absolute;right:0px;top:0px;width:300px;查看全部
-
文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流. 浮動（float）和 絕對定位（position：absolute）-->脫離文檔流 浮動和絕對定位脫離文檔流的區別 相同點：其他盒子都會無視被浮動或絕對定位的盒子； 不同點：盒子的內容會考慮被浮動的盒子，但任然會無視絕對定位的盒子。查看全部
-
body{margin:0;padding:0}清除默認樣式 兩列布局：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。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。查看全部
-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達信息的同時有美感。 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度 2、網頁的長度理論上可以無限延長 一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。常見分欄方式：一、二、三、列布局，混合布局。查看全部
-
兼容IE6不能用浮動，而且當字元素要設定為absolute的時候，父元素要設定relative才可以。查看全部
-
混合布局： 將一列布局改造就變成了混合布局。 主體部分加上子div 要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊 通過css將這些塊擺放正確，網頁布局就自然完美了。查看全部
-
3列布局-特殊案例 左右列固定寬度，中間列自適應。 左側絕對定位：position：absolute;left:0;top:0; 右側絕對定位：position：absolute;right:0;top:0; 中間寬度定義去掉，加上左右的margin值，margin:0 310px 0 210px; 上右下左（中間空一點出的話，增加margin屬性值便可以實現） 左右兩側布局固定寬度，中間部分寬度自適應。則需要采用絕對定位來實現，把左右設置為絕對定位查看全部
-
一列布局不適于存放文本，太長容易看走眼。 一列布局： 1.通常作為網頁頭部。固定寬度。 2.正真開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。查看全部
-
分欄又稱為分列，常見的布局查看全部
-
兩列布局：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【就是說也可以使用%粗略控制。】查看全部
-
通過設置左右兩側margin值來使中間那一列自適應查看全部
-
一列布局不適于存放文本，太長容易看走眼。 一列布局： 1.通常作為網頁頭部。固定寬度。 2.正真開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。查看全部
舉報
0/150
提交
取消