有人可以为CSS"设计模式"推荐一个好的在线资源吗？

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

这样的资源的一个示例是表设计列表，它为我们提供了真正需要了解的有关如何使用一组CSS技术使表看起来更好的所有信息。

可能有一套不错的解决方案的其他常见问题示例包括div上的圆角，高度可用的表单布局等。

解决方案

回答

对于此类事情，我一直都引用A List Apart文章。他们进行了大量的反复试验研究，以提出真正有创意的方法，以最干净，最可移植的方式处理那些常见的CSS问题。

回答

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

回答

下面列出了一些解决Web设计模式的网站。他们没有专门提供HTML和/或者CSS来获得所需的结果，但确实提供了可以在其上查看源代码(或者什至更好地使用Firebug)的实时站点的示例。

UI模式

这可能是最好的了。它将内容分为涵盖网页设计任务范围的类别。我们会发现许多类别，例如标签云，实时预览和用户注册。这是一个非常全面的资源，井井有条。它解释了每种模式，并提供了大量示例。

图案攻丝

与UI模式相似，但目前还不全面。通过允许用户创建自己的类别("用户集")并使用自己选择的站点来填充设计模式，它采用了一种更具社交性的方法来整理设计模式。

雅虎设计模式库

与其他两个站点不同，该站点没有提供许多实际站点的示例。它组织得很好并且很全面。

设计要素

这是一个博客，展示了Web设计的各种元素。它不讨论模式，但可以作为快速灵感的来源，也可以作为开始进行自己的分析的一种好方法。

回答

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

Floatutorial takes you through the
  basics of floating elements such as
  images, drop caps, next and back
  buttons, image galleries, inline lists
  and multi-column layouts.

回答

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

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

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

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

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