有人可以推荐一个关于 CSS“设计模式”的优秀在线资源吗?

我知道软件环境中的设计模式通常指的是基于 OO 的设计模式,但我指的是更广泛意义上的设计模式:IE。常见问题/任务的通用、干净的解决方案。

这种资源的一个例子是 这个桌子设计列表, ,这为您提供了有关如何使用一组 CSS 技术使表格看起来漂亮的真正需要了解的一切。

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

有帮助吗?

解决方案

我指的是 分开的清单 一直有关于这类事情的文章。他们进行了大量的试错研究,以提出真正有创意的方法,以尽可能最简洁、最可移植的方式处理这些常见的 CSS 问题。

其他提示

下面列出了一些解决网页设计模式的网站. 。他们没有专门提供 HTML 和/或 CSS 来实现所需的结果,但他们确实提供了实时网站的示例,您可以 查看源代码 上(或者更好的是,使用 萤火虫).

UI模式

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

图案水龙头

与 UI 模式类似,但目前不那么全面。它采用一种更加社交化的方法来整理设计模式,允许用户创建自己的类别(“用户集”)并用自己选择的网站填充它们。

雅虎设计模式库

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

设计要素

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

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

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

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

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

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

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

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

我最推荐的一本关于 CSS 的书是 精通CSS 作者:安迪·巴德 (cssmastery.com)。它有点小,但它比任何其他 CSS 书籍对我的帮助更大。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top