如何使用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
• 使用您选择的浏览器（例如，擅长根据标准渲染内容的Firefox 4），检查您的结果是否是逐个像素的。
• 调整网站大小，看它是否与原始网站的行为相同。
• 向经验丰富的开发人员询问您的HTML代码语义是否正确。这将帮助您确定是否使用了正确含义的正确标记。

这项任务将在您第一次执行时花费很长时间，但如果您是经验丰富的开发人员，则每页通常不会超过几分钟或长达一小时。有时可能会令人沮丧，但这是提高技能的好方法。在执行此操作时，请确保查看诸如http://www.htmldog.com/之类的引用以获取HTML / CSS语言语法。