如何在类似于大网站的纯css中进行设计答案

【问题标题】：How to design in pure css similar to the big sites如何在类似于大网站的纯css中进行设计
【发布时间】：2009-05-12 20:39:25
【问题描述】：

创建与浏览器兼容且纯粹使用 CSS 的网页的最佳做法/方法是什么，当然内容除外。我注意到像 yahoo.com 这样的大牌网站专门使用 CSS 进行布局，这可以很好地在手持设备中呈现内容。由于我有机会重新设计外部网站，我想采用这种方法，但我不知道如何去做。注意：我使用的是 JSF，但标准的 HTML/CSS 建议同样受欢迎。

【问题讨论】：

标签： html css jsf

【解决方案1】：

EvanK 提出的使用 CSS 框架的建议是一个好主意，我个人会推荐 Compass，在我看来，这确实代表了一种思考 CSS 的新方式，并且通常非常优雅。许多其他海报都提到了蓝图。 Compass 实际上使用 Blueprint（或您选择的其他框架）并将其进一步抽象化，允许您动态生成新的网格模板。从本质上讲，它为您提供了一个更加程序化的框架来使用 Blueprint 和 SASS。

然而，在您研究框架之前，了解一些基础知识是必不可少的。 W3Schools 是一个不错的起点，然后是一些不错的设计博客，例如 A List Apart。

在最小化跨浏览器问题方面a CSS reset 是必不可少的，这也是雅虎采取的方法。

【讨论】：

【解决方案2】：

我打算推荐相同的..这是我喜欢的两个，似乎是最受欢迎/支持的

http://www.blueprintcss.org/

http://960.gs/

【讨论】：

我也会投票检查 960.gs。它有助于布置块，但不能替代了解如何使用 CSS 设置样式。

【解决方案3】：

我认为对您来说，第一步是考虑使用某种 CSS 框架。根据 Wikipedia 的说法，此类框架的目标是“允许更轻松、更符合标准的网页样式”，这听起来就像您要问的那样。

至于使用哪些 CSS 框架，我自己不能推荐任何东西。

【讨论】：

【解决方案4】：

您需要学习如何使用 CSS。网上有很多教程。

这是一个很好的：http://www.barelyfitz.com/screencast/html-training/css/positioning/

【讨论】：

【解决方案5】：

我建议使用 CSS 框架来开始。一旦您习惯了一个框架，您将获得一个出色的页面网格结构（就像专业人士使用的大牌一样）并迅速加快您的开发时间。

因为你提到了雅虎，所以我推荐他们的YUI Grids CSS 进行布局。

我更喜欢blueprintcss，因为它可以为默认浏览器样式重置样式，并且它还有一个用于打印的样式表。

【讨论】：

【解决方案6】：

除了框架之外，为了实现一个跨浏览器兼容的网站，我建议您首先针对标准兼容的浏览器（如 Firefox），然后仅在它工作后，将支持扩展到不符合标准的浏览器（如 IE6）。

我的经验是，最初定位非标准浏览器（如 IE6）然后使站点跨浏览器兼容是非常困难的（几乎是不可能的）。

【讨论】：

【解决方案7】：

制作纯 CSS 布局确实没有什么秘诀。使用 CSS 布局网站的方法有很多种，真正需要的是对该技术有扎实的了解。

有些人在框架方面取得了成功。我真的不能说它们是否是一个好主意，但一个好处是它们抽象了构建 CSS 网站的一些坚韧不拔的细节。

但无论如何你都应该学习它。对于真正想坐下来了解 CSS 真正工作原理的人，我确实建议了两个网站：

SitePoint CSS Reference: Concepts - 可能是对 CSS 工作原理最全面的解释，这是一本易于阅读的指南

W3 CSS 2.1 Spec - 读起来很难，但它确实解释了一切是如何运作的

【讨论】：

【解决方案8】：

尽可能多地了解 CSS。很多时候，人们对 CSS 布局感到沮丧是因为他们不了解所有细节。

注意选择器模式匹配之类的事情 - 这将对简化您的标记产生重大影响。

请记住，可以将表格用于表格数据。表格标签的存在是有原因的。

一个非常有用的资源：@987654321@

【讨论】：