html - 什么是 CSS“设计模式”的好在线资源？

Question

任何人都可以推荐一个很好的 CSS“设计模式”的在线资源吗？

我知道软件上下文中的设计模式通常是指基于 OO 的设计模式，但我指的是更广泛意义上的设计模式：即针对常见问题/任务的通用、干净的解决方案。

此类资源的一个示例是此表格设计列表，它为您提供了有关如何使用一组 CSS 技术使表格看起来漂亮的所有信息。

其他可能有很好的解决方案的常见问题的例子是 div 上的圆角、高度可用的表单布局等。

score 11 · Accepted Answer

下面列出了一些解决网页设计模式的网站。它们并没有专门提供 HTML 和/或 CSS 来实现所需的结果，但它们确实提供了您可以查看源代码的实时站点示例（或者，更好的是，使用Firebug）。

UI 模式

这可能是最好的。它将事物分解为涵盖网页设计任务广度的类别。您会发现标签云、实时预览和用户注册等类别。这是一个非常全面的资源，组织良好。它解释了每种模式并提供了大量示例。

与 UI-Patterns 类似，但目前还不够全面。它通过允许用户创建自己的类别（“用户集”）并使用他们自己选择的站点来填充它们，从而采用更加社交的方法来整理设计模式。

与其他两个不同，这个没有提供很多真实站点的示例。它组织得很好，而且相当全面。

这是一个展示网页设计的各种元素的博客。它不讨论模式，但可以作为灵感的快速来源，或者作为开始您自己的分析的一种方式。

score 3 · Accepted Answer

对于这类事情，我一直都在参考A List Apart文章。

他们进行了大量的试错研究，以想出真正有创意的方法来以最简洁、最便携的方式处理这些常见的 CSS 问题。

score 2 · Accepted Answer

Floatutorial是学习重要的 CSS 属性“float”以及如何使用一些常见模式（包括两列和三列液体布局）来布局内容的一个很好的起点。

Floatutorial 带您了解浮动元素的基础知识，例如图像、首字下沉、下一步和后退按钮、图像库、内联列表和多列布局。

score 0 · Accepted Answer

已经提到的 A List Apart真的很好。自从我开始 Web 开发以来，我使用的另一个站点是 SitePoint.com。这是他们的CSS 参考。如果你想要一本好的 CSS 书，他们的书是我的最爱之一。

score 0 · Accepted Answer

最接近 CSS 中“设计模式”的是常见布局。利用常见布局、列宽等的最佳工具是960 网格系统，在960.gs

观看此截屏视频以获取简要介绍。它节省了大量时间，并帮助您以最少的代码应用所有常见的布局模式：

您所要做的就是应用适当的类并做一些算术以确保所有列宽加起来。

对于 CSS，我最推荐的一本书是Andy Budd 的CSS Mastery ( cssmastery.com )。它有点小，但对我的帮助比任何其他 CSS 书籍都多。