-
兩列布局：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.1因為寬度要自適應，） <head> <style type="text/css"> body{margin:0;pading:0} .left{width:20%;height:500px;float:left;background:#ccc} .right{width:80%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 若果想更確切的控制它的寬度可以將（%）改為像素（px）的形式查看全部
-
1、main不用相對定位 .main{background-color:red;height:500px;} .left{ position:absolute;top:100px;left:0;width:200px;background-color:blue;height:500px;} 2、main設置相對定位 .main{background-color:red;height:500px;position:relative;} .left{ position:absolute;top:0;left:0;width:200px;background-color:blue;height:500px;}查看全部
-
上右下左查看全部
-
布局居中常用：margin: 0 auto查看全部
-
1.一列布局不適于存放文本，太長容易看走眼 一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。 ------------------------------ <!DOCTYPE html> <html> <head lang="en"> <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>查看全部
-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達信息的同時有美感。 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度(百分比自適應寬度） 2、網頁的長度理論上可以無限延長（高度自適應） 一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。常見分欄方式：一、二、三、列布局，混合布局。查看全部
-
網頁布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達信息的同時有美感。 網頁設計特點（相對紙媒來說） 1、網頁可以自適應寬度(百分比自適應寬度） 2、網頁的長度理論上可以無限延長（高度自適應） 一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。常見分欄方式：一、二、三、列布局，混合布局。查看全部
-
布局居中常用：margin: 0 auto查看全部
-
布局：即頁面間元素的關系(塊與塊之間的關系)： 塊挨著塊 塊嵌套著塊 塊疊壓著塊查看全部
-
感覺還是不太熟。查看全部
-
相對定位（position：relative），不可以脫離文本流查看全部
-
其實有自己的想法才好，上面的例子讓我們很好的理解查看全部
-
body{margin:0;padding:0;} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0;} .middle{height:500px;background:#999;margin:0 300px 0 200px;} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0;} <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body>查看全部
-
1.一列布局不適于存放文本，太長容易看走眼 一列布局： 1.通常作為網頁頭部。固定寬度。 2.真正開發，高度設置自動的。 兩列布局自適應，使用百分比。 三列布局，使用絕對定位和margin。 盒子之間的三種關系： 1、相鄰 2、嵌套 3、疊加 我們要做的就是擺放好盒子的位置。 關于頁面上元素的加載順序： 元素是從前往后依次加載的，要想先加載就要寫在前面。 通常left部分是作為菜單，right部分作為主體內容，我們打開網頁，都希望先看到 主體內容，所以有意把right部分寫在left部分前面，然后把right部分右浮動，left部分左浮動， 這樣布局不會出現問題，而且還解決了IE6下右浮動換行的問題。 ------------------------------ <!DOCTYPE html> <html> <head lang="en"> <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>查看全部
-
1.三列布局 代碼如下 <head> <style type="text/css"> body{margin:0;padding:0} .left{width:33.33%;height:500px;float:left;background:#ccc} .middle{width:33.33%;height:500px;float:left;background:#999} .right{width:33.33%;height:500px;float:right;background:#ddd} </style> </head> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html> 2.特殊的三列布局 如下代碼 body{margin:0;padding:0} .left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0} .middle{height:500px;background:#999;margin:0 300px 0 200px} .right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0} </style> </head> <body> <div class="left">200px</div> <div class="middle"></div> <div class="right">300px</div> </body> </html>查看全部
舉報
0/150
提交
取消