如何使用 div 创建页面

Posted 2023-02-23

【中文标题】如何使用 div 创建页面

【英文标题】：How to create pages using divs

【发布时间】：2011-08-01 20:50:44

【问题描述】：

有人可以向我推荐任何关于如何使用 div 从头开始​​创建网页（切片 psd）的好的初学者指南。我有 html 和 css 知识，但从未以任何方式从头开始创建任何页面 div/table/html5

【参考方案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 语言语法。