如何使用 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 语言语法。