我知道这是一个非常具有包容性的问题，但我刚刚开始使用 Ruby on Rails，并且在 CSS 和 HTML 方面还有很长的路要走。 有很多关于 CSS 和 HTML 模式的书籍，但我想知道真正应用于实际网页的内容。 例如，制作一个带有横向菜单、顶部有徽标、下方有一些文字的简单网页的最佳方式是什么？ 好吧，这似乎很愚蠢，但有很多方法可以做到这一点，或者没有？
那么，我该如何学习这些模式以及真正的模式是什么？
希望对书籍、文章等提出建议。
【问题讨论】：
标签： html ruby-on-rails css
你可以在这里找到一些不错的 CSS 模板：
【讨论】：
其实在 html 和 css 中并没有 oo 意义上的模式。
我发现本教程非常有用： Design and Code your first website
nettuts 网站有很多非常好的免费教程。
一本非常好的书是：
【讨论】：
它因开发人员而异。所以我就告诉你我在做什么！
我实际上遵循一个非常常见的模式 - 将任何布局与内容分开！
进入 HTML 去...
<div/> 带有要布局的 ID 的容器在 CSS 中...
<div/> 布局容器的布局它允许快速更改整个页面设计，甚至无需接触 HTML！而且它减少了服务器的流量和客户端页面的加载时间，因为 CSS 文件可以被缓存，因为它不会像 HTML 那样改变！
发布的 CSS Zengarden nate 就是这种模式的一个很好的例子。相同的未经修改的 HTML 与数十个外观完全不同的 CSS 文件！
此模式还允许在大型显示器、小型上网本和移动设备上显示相同的未修改 HTML，并自动选择 CSS 文件。如果你问我，再好不过了！
【讨论】：
您可能想查看一些 CSS 库。
我个人不喜欢使用它们，因为我有自己喜欢做事的方式，但有时它们对于我想做的事情不够灵活。但是由于您刚刚开始，它们可能会帮助您快速获得看起来不错的东西，而不必担心浮动下降错误或边距折叠或任何其他易于击中但很难识别的 CSS 怪癖。以前见过。
Yahoo User Interface (YUI) Grids CSS 就是一个例子，它可以帮助您设置许多不同类型的网格布局。要查找更多信息，我会搜索“css 框架”或“css 库”。
我认为对您非常有用的另一个 YUI 资源是他们的 design pattern library，它记录了显示常见界面项的不同方式，并为您提供了实现它们的资源。这有助于使用户看起来熟悉您的界面，并且可以避免您觉得必须重新设计下拉框或其他东西。
【讨论】：
经验法则应该是在 CSS 中进行所有设计，而 HTML 只是没有调用设计的 HTML。这样一来，就像上面提到的那样，您可以快速更改设计。
Zengarden CSS 网站是一个很好的参考，它是如何工作的：http://www.csszengarden.com/
这是我学习 CSS 设计细节时经常使用的网站。
【讨论】：