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

Question

20

有没有人可以推荐一个好的CSS“设计模式”的在线资源？

我知道在软件上下文中的设计模式通常指面向对象的设计模式，但我的意思是广义上的设计模式：即解决常见问题/任务的常见、干净的解决方案。

这样一个资源的例子是这个表格设计列表，它提供了使用一组CSS技术使表格看起来漂亮的所有必要信息。

其他常见问题的例子可能包括div的圆角，高度可用的表单布局等。

- Robin Barnes

5个回答

3

我总是参考《A List Apart》文章来处理那些问题。

他们进行了大量的试错研究，以最清洁、最便携的方式处理那些常见的CSS问题，从而提出了非常有创意的解决方案。

- cpm

2

Floatutorial是学习重要的CSS属性“float”及如何使用它来布局内容的很好的起点，其中包括两列和三列流体布局等常见模式。

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

- J c

0

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

观看这个屏幕录像以获得简要介绍。它可以节省大量时间，并帮助您使用最少的代码应用所有常见的布局模式：

你需要做的就是应用适当的类，并进行一些算术运算，以确保所有列宽度加起来。

我最推荐的CSS书籍是Andy Budd（cssmastery.com）的《CSS Mastery》。它有点小，但比其他任何CSS书籍都更有帮助。

- Berkana

0

前面提到的A List Apart非常不错。自从我开始网站开发以来，我一直在使用另一个网站SitePoint.com。这是他们的CSS参考。如果你想要一本好的CSS书籍，他们的是我最喜欢的之一。

- Les M

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- charlesroper · Accepted Answer

以下列出了一些关于网页设计模式的网站。它们并没有针对实现所需结果提供HTML和/或CSS，但是它们提供了可以“查看源代码”（或更好地使用Firebug）的实时网站示例。

UI-patterns

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

与UI-Patterns类似，虽然目前不那么全面。它采用更社交的方式来整理设计模式，允许用户创建自己的分类（“用户集”）并以自己选择的站点填充它们。

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

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