如何拆分頁面並顯示底層的內容？

我已經在我的iPhone應用上實現了這個功能，但是我想知道是否可以在HTML頁面上使用CSS效果或類似功能。
alt text 如何拆分頁面並顯示底層的內容？

正如你可以看到，當前視圖被分割，底部向下移動，而另一種觀點則下方顯示。我有一個網頁我想試試這個。任何想法，如果這是可能的，以及有關我如何做到這一點的具體細節？我是相當新的HTML編碼，所以請對我輕鬆。 :)

在此先感謝！

下面是一個例子，讓你開始http://jsfiddle.net/Cquhj/

有幾件事情采取從這個模式走：

編輯：
我真的很喜歡的資源，並給出答案，我想補充一點的名單http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu

2011-01-08 04:03:47 nedk

是的，這絕對是可能的，沒有什麼不尋常的，CSS一定會需要。

事實上，您的問題非常普遍，答案將是：瞭解HTML和CSS以及兩者的結合，以創建符合標準的網頁佈局。你可能也想閱讀關於盒子模型的知識。要解決您的問題，您需要了解一系列<div>的使用，定位和浮動以實現所需的佈局。

如果你想添加動畫，就像分割視圖的某些部分向下浮動一樣，你也需要Javascript。

2011-01-08 03:50:49 markus

感謝您的回答。你有沒有資源可以指引我正確的方向？ – 2011-01-08 03:52:18

其實萬維網和特別是這些充滿了這樣的資源，你的問題已被問了上百次......我正在考慮投票關閉你的，但你添加了這個漂亮的截圖，所以我就像...哦瓦塔。 – markus 2011-01-08 03:57:31

@thearkun啊，我在這裏搜索，但似乎沒有出現。這是叫什麼，所以我熟悉術語？ – 2011-01-08 04:07:32

這是非常有可能的，但它有點像問「我要文明編程，和我很新的C;我該怎麼做？」 ;-)

我強烈建議選擇一個好的「DHTML」（動態HTML）書。例如，我很喜歡這一個，來自SitePoint：http://www.sitepoint.com/books/dhtml1/

如果你不是購書類型，像SitePoint和AListApart這樣的網站當然也可以解釋一些東西，但不是以格式組織的。

祝你好運。

2011-01-08 04:01:28 machineghost

感謝您的幫助。如果我打算認真製作網站，我認爲我會拿起一本書。截至目前，我只是爲了好玩而做這個。 :) – 2011-01-08 04:06:09

下面是可能給你一點點，如果你的計劃是模擬代碼示例使用jQuery的iOS 4文件夾行爲。

該視圖基本上被拆分成行，我玩弄背景位置CSS屬性允許背景分裂錯覺。

2011-01-08 07:24:43

這裏的更新，更多的iPhone類似的

它錯過了三角形一旦點擊該文件夾的底部，並計算容器的高度時，有更多的比4個圖標。

2011-05-01 18:11:38

我知道這是舊的文章/問題... 但我用動態的高度和位置這樣的位置：

http://webkit-os.pixelass.com/iframe/ （僅適用於Chrome和Safari） 我使用jQuery和兩個div具有相同的圖像。動態位置意味着..您可以將文件夾移動到不同的位置或頁面。動態高度表示...高度相對於文件夾中的圖標行數。

如果內容太高而無法在下面顯示，則文件夾甚至會在上方和下方打開。（從Dock打開文件夾不起作用）

2011-11-27 02:40:21 pixelass

回答