-
布局有一列、二列、三列和混合布局 混合布局： 將一列布局改造就變成了混合布局。 即主體部分加上子div 要點回顧： 其實在網頁制作當中，頁面中的元素就是塊與塊之間的關系： 塊挨著塊；塊嵌套著塊；塊疊壓著塊 通過css將這些塊擺放正確，網頁布局就自然完美了。 1、margin:0 auto 自動居中 2、兩種分成三欄的方式： 1）兩邊position：absolute，left：0/right：0，top:0， 中間margin｛0 右邊 0 左邊｝ 2）先分兩欄 左右float 再分兩欄左右float查看全部
-
三列布局：不能使用float,左右兩列絕對定位，分別靠左和靠右。中間列布局的左右margin分別設置為左右兩列的寬度即可，如果列與列之間需要間隔，則增加相應的margin值。查看全部
-
1.要兼容IE6，所以盡量不要使用float，用絕對定位或者相對定位就可以了 2.在這里先加載的意思就是把right寫在前面的div，left寫在后面的div查看全部
-
？？ 1. 因為main中的兩個DIV，left和right都設置了浮動，導致main這個DIV沒有被撐開，縮成了一個點在top這個DIV下面，根據我的測試，解決辦法有兩個，第一個是給footer設置清除浮動clear:both。第二種給main這個DIV設置一個height:600px ，這樣與left、right這兩個DIV高度一致，這樣就撐開了main這個DIV，效果也就出來了。 2. 如果不清除浮動，float的元素是脫離了文檔流，那么這個元素原來在文檔流里的位置不會被繼續保留，就會被后來的元素所替代。這個例子中，float的元素的高度要比后來的元素即footer的高度要高，所以footer會被float的元素覆蓋了，如果你把float的元素高度設置的比footer小一點，你就可以看到footer顯出了部分綠色。 那么如果footer的樣式中添加clear的作用是，保留原來float元素在文檔流中的位置，這樣footer元素就不會去替代float元素所在的位置了。 3. overflow：hidden的意思是超出部分不顯示，就是假如你的div是300*400的，但在里面插入一張400*500的圖片，圖片就會跑出那個div里面，用了這個屬性和屬性值后，圖片超出300*400這個范圍的內容不顯示出來。而clear：both僅僅只是清除左右兩邊的浮動而已查看全部
-
**混合布局 通過將一列布局的中間模塊加上倆子模塊改為2列，然后又將每一列加上子模塊往下分查看全部
-
三列布局 兩邊固定，中間自適應： .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; background:#FCC;}絕對定位在右側查看全部
-
兩列布局 兩列自適應布局： 1.一個模塊設置width：20%，另一模塊width:80%(加起來為100%) [不設置寬度就是自適應寬度] 2.設置浮動float，一個為left，一個為right。 定寬兩列布局 還可以給兩個模塊增加一個父級模塊，如果給父級模塊設置寬度width：500px，那么這兩個模塊的寬度就為500px，也可將兩個子模塊的寬度width設為300px和200px，加起來為500px即可。 設置父級margin：0 auto； 可以使兩個定寬模塊居中。查看全部
-
一列布局： margin:0 auto;是塊狀元素的居中對齊方式， text-align:center;是內聯元素（如，a,img標簽)的對齊方式， *bod{padding:0;margin:0;}是做為初始化頁面，清除默認樣式。（原因是頁面在被各個瀏覽器讀取時的理解不同產生不同的展示效果，所以需要清除.）查看全部
-
margin:0 auto;是塊狀元素的居中對齊方式，text-align:center;是內聯元素（如，a,img標簽)的對齊方式，padding:0;margin:0;是做為初始化頁面，原因是頁面在被各個瀏覽器讀取時的理解不同產生不同的展示效果，所以需要清除.查看全部
-
1.要兼容IE6，所以盡量不要使用float，用絕對定位或者相對定位就可以了 2.在這里先加載的意思就是把right寫在前面的div，left寫在后面的div查看全部
-
margin:0 auto 水平居中查看全部
-
1. 因為main中的兩個DIV，left和right都設置了浮動，導致main這個DIV沒有被撐開，縮成了一個點在top這個DIV下面，根據我的測試，解決辦法有兩個，第一個是給footer設置清除浮動clear:both。第二種給main這個DIV設置一個height:600px ，這樣與left、right這兩個DIV高度一致，這樣就撐開了main這個DIV，效果也就出來了。 2. 如果不清除浮動，float的元素是脫離了文檔流，那么這個元素原來在文檔流里的位置不會被繼續保留，就會被后來的元素所替代。這個例子中，float的元素的高度要比后來的元素即footer的高度要高，所以footer會被float的元素覆蓋了，如果你把float的元素高度設置的比footer小一點，你就可以看到footer顯出了部分綠色。 那么如果footer的樣式中添加clear的作用是，保留原來float元素在文檔流中的位置，這樣footer元素就不會去替代float元素所在的位置了。 3. overflow：hidden的意思是超出部分不顯示，就是假如你的div是300*400的，但在里面插入一張400*500的圖片，圖片就會跑出那個div里面，用了這個屬性和屬性值后，圖片超出300*400這個范圍的內容不顯示出來。而clear：both僅僅只是清除左右兩邊的浮動而已查看全部
-
<!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:100px;background:#ccc;} .main{background:#f00;height:500px;} .left{width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;} .right{margin-left:210px;background:rgb(154,204,153);height:100%;} .foot{width:100%;height:50px;background:#F63;clear:both;} </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.clear:both 2.overflow:hidden查看全部
-
<!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; position:absolute;top:0px;left:210px;right:310px background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} </style> </head> <body> <div class="left">left</div> <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div> <div class="right">right</div> </body> </html>查看全部
舉報
0/150
提交
取消