-
上中下布局查看全部
-
3列布局查看全部
-
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、網頁的長度理論上可以無限延長（高度自適應） 一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。常見分欄方式：一、二、三、列布局，混合布局。查看全部
-
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、網頁的長度理論上可以無限延長（高度自適應） 一般是頭部，主體，底部。主體一般再根據需要分欄，一般兩欄或者三欄，還有可能分為更多的欄目。常見分欄方式：一、二、三、列布局，混合布局。查看全部
-
修改了，用absolute絕對定位來做才是對的?，F在應該是對的了，哈哈。查看全部
-
不知道是否準確，效果大概實現了查看全部
-
不知道是否準確，效果大概實現了 <!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; color:#fff} .top{width:100%;height:200px;background-color:#555;} .main{width:100%;height:600px;background-color:red;} .left{width:30%; height:600px; background-color:blue;float:left;} .right{width:69%;height:600px;background-color:green;float:right;} .foot{width:100%;height:200px;clear:both;background-color:#333;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
大家看看對不對？查看全部
-
這里是一個排版陷阱：當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，不代表它不存在。查看全部
-
浮動后面的元素如果不清除浮動， 就會當前面的元素不存在而占用其位置. 本例中main未設置高度,footer未清除浮動其css效果就會占用main位置 清除浮動方式： clear:both overflow:hidden 在有些情況下只能是用overflow:hidden來清除浮動查看全部
-
布局：又稱辦事布局，是網頁UI設計師將有限的視覺元素進行有級的排列組合。查看全部
-
混合布局： 將一列布局改造就變成了混合布局。 主體部分加上子div 要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊 通過css將這些塊擺放正確，網頁布局就自然完美了。 1、margin:0 auto 自動居中 2、兩種分成三欄的方式： 1）兩邊position：absolute，left：0 top：0 right：0 中間margin｛0 右邊 0 左邊｝ 2）先分兩欄 左右float 再分兩欄左右float ※：自適應布局不能使用float查看全部
-
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
提交
取消