如何安排HTML5網頁元素？

我想要製作一個示例網頁來熟悉HTML5，並且我想嘗試複製Facebook的頁面佈局;即跨越整個屏幕寬度的頁眉，底部的一個小頁腳和一個三欄主體，由左側的鏈接列表，中間的主要內容以及可選部分組成在右側（對於廣告，框架等）。它很整齊，可以很好地顯示在多個窗口大小中。如何安排HTML5網頁元素？

到目前爲止，我試圖用<header>,<footer>和<nav>和<section>塊分別完成此操作。但是，頁面存在一些異常情況。當窗口最大化時，頁眉右下角的頁腳（包含一個帶有版權信息的簡單文本塊）出現在頁眉的右上角。另一方面，當沒有足夠的空間顯示窗口中的所有內容時，它會將主體文本放置在該部分的下面。換句話說，它保持移動元素以適應窗口。

有人可以告訴我，我會如何實現我的目光？我嘗試過通過Google閱讀了幾個CSS屬性，但我很確定我不知道自己在做什麼，並且可以真正使用一些指導。

謝謝！

來源

2012-12-15 Argus9

這些標籤本身並不影響元素的放置，你需要使用CSS來設計它們的樣式，試着閱讀關於CSS定位/佈局的教程 – Jeff

我知道 - 對不起，我應該提到這個。有HTML5的基礎知識和CSS拍下來，但定位是我在遇到麻煩周圍環繞我的頭什麼的。 – Argus9

這不是一個HTML5問題，而是對HTML和CSS的基本理解。如果你打算進入web開發，你將需要了解像浮動等基本的CSS。我會推薦一些教程在YouTube或NetTuts。只需使用幾個div，在頁面中移動它們，使用CSS操縱它們，它就會開始走到一起。然後製作帶有固定頁眉和頁腳的三列布局將看起來像一塊蛋糕。

Floating Divs w/ CSS

來源

2012-12-15 05:00:40 Swordfish0321

我覺得CSS是超級難的。製作一個看起來不錯的頁面並且可以在很多不同的平臺和瀏覽器上工作是非常困難的。您可能會發現使用css框架最簡單，例如Bootstrap。

將它放到您的網站中，並用它來進行佈局。使用您的瀏覽器的開發工具（Firefox的Firebug）來檢查應用於各種元素的樣式。修改樣式以滿足您的需求。

HTML5並不真的給你免費的頁面佈局。您提到的元素（header，section等）用於創建語義頁面，而不是指定應該如何顯示它們。

來源

2012-12-15 05:00:49 Oliver

我只是好奇，你有什麼進入編程語言？ – Charlie

@Charlie現在，我主要是做C＃， python，Objective C和javascript，還有SQL，如果這樣的話。 – Oliver

好吧，我剛剛看到你的評論CSS很難，它讓我很想知道你習慣了什麼，我開始使用CSS和HTML，Objective C是對我來說是一種痛苦（我正在慢慢地學習......），只是讓我覺得很有趣 – Charlie

如果沒有您的代碼，幫不了你的忙。但我相信這是因爲float問題。添加此CSS屬性到您的頁腳clear: both

希望它可以幫助。

來源

2012-12-15 05:03:46 Bobby

我不確定你是否試圖讓自己有點黑客，或者如果你正在尋找一個完整的庫，將爲你做這一切，但如果你正在尋找後者，我推薦使用Twitter Bootstrap，這是一個用於實現許多HTML5功能的跨平臺解決方案，甚至可用於非現代瀏覽器的回退。唯一的缺點是需要jQuery才能初始化響應*的組件。但是，如果您不打算實施these features，則這是可選的。令人驚訝的是，響應式設計不需要javascript，因爲它是純CSS。希望這可以幫助！

*編輯：意思是「互動」那裏，而不是「響應」。「

來源

2012-12-15 05:07:27

我打算首先檢查一下，肯定。從它的聲音來看，CSS不僅僅是一個有用的工具，更是一件苦差事，所以也許這樣的框架正是我所需要的。謝謝！ – Argus9

如何安排HTML5網頁元素？

回答

相關問題