如何創建這樣

分隔膜的HTML頁面，我想創建一個網頁，它看起來像這樣： http://i.imgur.com/HVKRB.png 如何創建這樣

我不能使用（我會在網站上使用AJAX如此多幀因爲一頁上的內容會影響其他人，所以最乾淨的方式是什麼？

一個類似的網站是谷歌閱讀器，我是一個HTML和I我不知道他們是如何做到的。

編輯：部分應占據整個眉頭ser窗口（所以沒有在頁面上滾動，只是個別部分。 Google Reader就是一個很好的例子。謝謝:)

來源

2011-07-26 aerain

這是一個很簡單的例子：http://jsfiddle.net/C7eA8/。請注意，在同一元素上使用proentual寬度和邊框會出現問題。要獲得像素完美的解決方案，請在px中使用寬度或將邊框繪製到區域div中的元素。

來源

2011-07-26 06:25:21

啊！精彩！你能告訴我如何包含標題嗎？（我更新了上面的圖片）。當我嘗試這樣做時，頁面會變得混亂。謝謝！ – aerain

好的，我們去：http://jsfiddle.net/C7eA8/4/ –

太棒了。最後一件事 - 我如何讓這些元素佔據整個頁面？ – aerain

這可以通過使用HTML的framset標籤來完成。語法如下：

<frameset cols="25%,*,25%"> 
    <frame src="frame_a.htm" /> 
    <frame src="frame_b.htm" /> 
    <frame src="frame_c.htm" /> 
</frameset>

瞭解更多關於框架集在這裏：http://www.w3schools.com/tags/tag_frameset.asp

編輯：哎呀，忘了你不能使用框架。你應該使用表來實現這一點，但我不會推薦它。您將使用rowspan="2"使第一個單元格跨越頁面的整個高度，並在該右上角的單元格上使用colspan="2"。

來源

2011-07-26 05:49:04 Purag

對不起 - 我不想使用幀（見上）或framsets。謝謝！ – aerain

@aerain：對不起，請查看我上面的修改。 – Purag

如果我使用框架，我可以使用Google閱讀器這樣的滾動條嗎？ – aerain

下面是做這件事：

<?DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    * { 
     margin:0px; 
     padding:0px; 
    } 
    .left { 
     float:left; 
     width:20%; 
     height:500px; /* probably want to let content set height, though */ 

     background:#ccc; 
    } 
    .right { 
     width:80%; 
     float:right; 
    } 
    .right .top { 
     height:200px; /* probably want to just let content set height, though... */ 

     background:#00f; 
    } 
    .right .bottom { 
     height:300px; 
    } 
    .right .bottom .bottom-left { 
     float:left; 
     width:20%; 
     height:100%; 

     background:#ddd; 
    } 
    .right .bottom .bottom-right { 
     float:right; 
     width:80%; 
     height:100%; 

     background:#666; 
    } 
</style> 
</head> 
<body> 

<div class="left"></div> 
<div class="right"> 
    <div class="top"></div> 
    <div class="bottom"> 
     <div class="bottom-left"></div> 
     <div class="bottom-right"></div> 
    </div> 
</div> 

</body> 
</html>

來源

2011-07-26 05:58:10 PersonThing

感謝您的答覆。我實際上想知道是否可以強制顯示滾動條（有點像堆棧溢出對那些代碼窗口所做的那樣）。我忘了我的頁面的一部分。它實際上應該是這樣的：http://i.imgur.com/HVKRB.png（沒有滾動條的標題）。謝謝！ – aerain

然後給你的元素靜態尺寸（'height：300px; width：20％;'或任何你喜歡的），然後給它們'overflow：auto;' - 告訴瀏覽器如果元素內的內容不適合它應該使用滾動條讓用戶看到其餘的內容。 – PersonThing

大家總是不尊重我的老派桌子。但是，它是交叉瀏覽器，當窗口寬度被操縱時，它不會弄亂佈局。現場演示：http://jsfiddle.net/hobobne/CPvTw/

<html> 
    <head> 
     <title>4 section demo</title> 
     <style> 
      html, body {height: 100%;} 

      #global_table {border-collapse:collapse; width: 100%; height: 100%;} 

      #section_0, 
      #section_1, 
      #section_2, 
      #section_3, 
      #section_4 {border: 1px solid #000000; font-weight: bold; text-align: center;} 

      #section_0 {padding: 20px 0px; height: 1%;} 
      #section_1 {} 
      #section_2 {} 
      #section_3 {} 
      #section_4 {} 
     </style> 
    </head> 
    <body> 
     <table cellpadding="0" cellspacing="0" border="0" id="global_table"> 
      <tr> 
       <td colspan="3" id="section_0">section 0</td> 
      </tr> 
      <tr> 
       <td rowspan="2" id="section_1">section 1</td> 
       <td colspan="2" id="section_2">section 2<div id="dragbar"></div></td> 
      </tr> 
      <tr> 
       <td id="section_4">section 4</td> 
       <td id="section_3">section 3</td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2011-07-26 06:56:28

我會使用jQuery添加滾動條和拖動條。 –

哇，這看起來相當不錯，但我必須說，使用div（和更多html5ish）時代碼更清潔 – aerain

當然是的。但是，請嘗試操縱視圖框的寬度：http：//jsfiddle.net/C7eA8/，正如您所看到的那樣，容器互相跳下。因爲這不是最理想的解決方案。我的方式看起來不太整潔，但非常靈活，非常靈活。 –

只是要像你想要的頁面佈局，並在需要的DIV設置 overflow-y:scroll;。這將工作正常。

來源

2011-07-26 07:34:16 Kaisar

你也可以使用jQuery UI插件（佈局）以獲得更好的外觀和更多的自定義功能。 – Kaisar

如何創建這樣

回答

相關問題