-
上面的代碼沒有給main設置高度，而main里的內容又設置成了浮動，所以footer會跑到head的下面。 解決方法有兩個：1.清除浮動， clear:both; 2.為main設置高度， .main{ width:860px;height:600px;margin:0 auto;background:#9FC; }查看全部
-
<!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; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310px 0 210px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0;position:absolute; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div> <div class="right">right</div> </body> </html>查看全部
-
div是塊狀元素，它會很霸道的占一行，從代碼可以看出啊，整個的main內容塊沒有指定高度的，只有它的子內容塊指定了高度，但是它的子內容塊是浮動的，所以子內容塊的高度不能影響成為main的高度，那么瀏覽器就默認了把footer的div顯示在top的下一行，這個時候添加clear:both清除了上面模塊的浮動特性，那么此時main的高度就是和子內容塊的高度是一樣的，因此瀏覽器就會把footer的div顯示在main的下一行； 你可以嘗試把clear:both語句清除，然后定義如下的樣式 .main{height:600px;}；把main的高度加上，那么瀏覽器也會正確顯示的查看全部
-
.left{ width:200px; height:600px; position:absolute; left:0; top:0} .main{ height:600px; margin:0 310 0 210; } .right{ height:600px; width:300px; position:absolute; top:0;right:0; } //main為自適應寬度，left和right是自定義的固定高度查看全部
-
margin:0 auto; 起水平居中作用 0代表垂直方向的，auto，代表左右方向的查看全部
-
body{margin:0;padding:0}清楚默認設置查看全部
-
三列布局：兩邊固定寬度，中間自適應模式：兩邊寬度設置固定像素，絕對定位。中間通過設置margin的上下左右值來實現。查看全部
-
清除浮動樣式clear：both；查看全部
-
overflow：hidden的意思是超出部分不顯示，就是假如你的div是300*400的，但在里面插入一張400*500的圖片，圖片就會跑出那個div里面，用了這個屬性和屬性值后，圖片超出300*400這個范圍的內容不顯示出來。而clear：both僅僅只是清除左右兩邊的浮動而已查看全部
-
考驗布局的綜合能力查看全部
-
****** overflow：hidden的意思是超出部分不顯示，就是假如你的div是300*400的，但在里面插入一張400*500的圖片，圖片就會跑出那個div里面，用了這個屬性和屬性值后，圖片超出300*400這個范圍的內容不顯示出來。而clear：both僅僅只是清除左右兩邊的浮動而已查看全部
-
混合布局，中間兩列，左邊固定，右邊自適應，使用父元素相對定位，子元素絕對定位。 <html> <head> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff } .top{ height:100px; background:#ccc; } .main{ height:500px; background:red; } .left{ width:200px; height:500px; background:blue; float:left; position:absolute; } .right{ position:absolute; left:210px; right:0; height:500px; background:#9c9; } .foot{ height:50px; background:#F63; } </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>查看全部
-
1、margin:0 auto; /* 使div在瀏覽器中水平居中 */ float:left; /* 使div左浮動 */ float:right; /* 使div右浮動 */ clear:both; /* 清除浮動 */ 2、為何一定要清除浮動呢？ div是塊狀元素，它會很霸道的占一行，從代碼可以看出啊，整個的main內容塊沒有指定高度的，只有它的子內容塊指定了高度，但是它的子內容塊是浮動的，所以子內容塊的高度不能影響成為main的高度，那么瀏覽器就默認了把footer的div顯示在top的下一行，這個時候添加clear:both清除了上面模塊的浮動特性，那么此時main的高度就是和子內容塊的高度是一樣的，因此瀏覽器就會把footer的div顯示在main的下一行 清除浮動兩種方法：1. clear:both; 2. overflow:hidden.查看全部
-
1、一列布局：margin：0 auto 兩列布局：左右浮動<br> 三列布局：二列布局基礎上，左右絕對定位，中間靠margin調整位置 混合布局：在一列布局的基礎上，保留top和foot部分，將中間的main部分改造成兩列或三列布局 2、混合布局 （1）在一列布局的基礎上，將中間main部分改成兩列 （2）在二列布局的基礎上，將中間main部分改成三列 （3）在三列布局的基礎上，將頂部top部分嵌入一個區域 3、要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊、塊嵌套著塊和塊疊壓著塊 通過CSS將這些塊擺放正確，網頁布局就自然完美了。查看全部
-
三列布局的特殊案例（自適應寬度） 要求：三列，左邊浮動200px，右邊浮動300px position:absolute; left:0;top:0; margin:0 300px 0 200px; position:absolute; right:0;top:0;查看全部
舉報
0/150
提交
取消