3、网页布局搭建全攻略

网页布局搭建全攻略

1. 重置与样板的争论

有人反对使用重置样式表、样板代码和条件注释，他们认为默认的 CSS 规则是合理的，比如能正确格式化无序列表，而且有很好用的 CSS 技巧可以使用，还能让 HTML 代码避免那些超级丑陋、怪异的条件注释，以免代码变得混乱。

不过，如果只针对一个平台进行编码，或者每次都有耐心去挖掘所有细节，这种方法确实不错。但使用自己创建的样板代码可以节省项目时间和成本，尤其在团队协作中，能反复使用相同的基础代码。

CSS 浏览器特定的技巧在维护时可能会有问题，而且只有整个开发团队都理解这些技巧时才能正常工作，而这种可能性通常较低。重置和规范化浏览器内置样式表是兼顾开发者体验和应用程序未来可扩展性的最佳实用方法。

2. 构建页面框架

我们要创建全局元素，包括页眉、侧边栏、提示信息和页脚。这些元素包含应用程序的品牌标识（如 logo、标语和颜色）、主导航和实用导航。主导航包含项目、创作、主页等主要元素，帮助用户在网站中导航；实用导航则支持用户登录、退出和访问账户。

从流程上看，应先编写最少的 HTML 代码，再根据布局和交互需求（如 JavaScript、Ajax 等）添加额外元素。这样能保持代码简洁，让我们先关注内容语义和含义，而非单纯的展示和布局。

首先，将一些代码放在部分文件中。把页眉和页脚放在 layouts 文件夹的部分文件中，能让布局更易读，便于专注于构建过程。我们将渲染一个名为 _header.html.erb 的部分文件。从 app/views/layouts/application.html.erb