如何使用div創建頁面

Question

有人可以建議我有關如何使用div從頭開始創建網頁（切片psd）的任何良好的初學者指南。我有HTML和CSS知識，但從未以任何方式從頭開始創建任何div/table/html5

Answer 1

從模仿一個簡單的頁面開始。這被稱爲「潔淨室」練習，非常適合提高您的HTML和CSS技能，並且實際上可以將設計和佈局創意從您的想法轉移到代碼中。

這裏是你如何做到這一點：

• 選擇，其設計你喜歡，看起來很簡單足夠的頁面。例如，在flickr.com註銷的頁面。
• 截取它;不看HTML/CSS代碼在所有
• 使用自己的HTML和CSS從無到有
• 創建它的一個副本，您可以使用顏色選擇器來發現他們用什麼顏色
• 嘗試模仿字體和手動距離，而不看他們的規則;這將有助於您更好地理解頁面佈局規則和排版規則。
• 確保您最終的HTML驗證，最好爲XHTML 1.0 Strict標準（這比HTML5嚴格，與HTML5兼容）
• 也驗證你的CSS
• 使用您選擇的瀏覽器（如火狐4，這是很好的渲染根據標準的事情），檢查你的結果是否是逐像素相同的。
• 調整您的網站的大小，看看它的行爲是否與原文相同。
• 問一個更有經驗的開發者是否你的HTML代碼是語義上是正確的。這將幫助您確定您是否正確使用了正確的標籤。

第一次做這件作業需要很長時間，但如果您是一位經驗豐富的開發人員，通常每個頁面不會超過幾分鐘或一小時。有時可能會令人沮喪，但這是提高技能的好方法。在做這件事的時候，請確保您查看HTML/CSS語言語法的引用，例如http://www.htmldog.com/。