DIV+CSS網頁另類上下布局的實例代碼

2020-10-23 18:30:37

字體：大中小

來源：轉載

供稿：網友

先說說在嘗試的過程發現的幾個問題
1、盒模型問題
相信玩重構或者說是DIV+CSS的朋友應該都知道這個東西，廢話不多說，不知道而有興趣可以去網上搜索一下。這里我提到這個是因為這個布局是用百分比來控制的，所以當加對邊框加上1px的邊后，就不好減回來，我是舍棄了上邊的邊框樣式。

2、溢出問題
這個問題只要對overflow做hidden就可以了，防止內容過長而溢出。剛剛開始的時候可以對html跟body的overflow加一個hidden屬性。Blank 告訴我，IE默認是有滾動條的寬度（這個偶知道），而FF是沒有的（這個偶就不知道了）。

基本上也就這樣，代碼如下：

<!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=gb2312" /> <title>上下層測試</title> <style type="text/css">  </style> </head> <body> <div   class="iwvjtn8m0"   id="bodyDiv"> <div   class="iwvjtn8m0"   id="topDiv"><h3>上面的</h3> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br /><br><br><br><br> </div> <div   class="iwvjtn8m0"   id="bottomDiv"><h3>下面的</h3></div> </div> </body> </html> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

上一篇：CSS實現每行新聞數量不等效果代碼

下一篇：xhtml+css網頁制作中常見問題解決方法