如何设计类似于大型网站的纯css

时间:2009-05-12 20:39:26

标签: html css jsf

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

8 个答案:

答案 0 :(得分:3)

EvanK建议使用CSS框架是一个好主意,我个人推荐Compass,我认为它真正代表了一种思考CSS的新方法,而且通常非常优雅。许多其他海报都提到了蓝图。 Compass实际上使用Blueprint(或您选择的其他框架)并进一步抽象它,允许您动态生成新的网格模板。从本质上讲,它为您提供了一个更加编程的框架,用于处理Blueprint和SASS

然而,在研究框架之前,了解一些基本原则是至关重要的。 W3Schools是一个很好的起点,其次是一些优秀的设计博客,例如A List Apart

在最小化跨浏览器问题方面,a CSS reset至关重要,这是雅虎所采取的方法。

答案 1 :(得分:2)

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

http://www.blueprintcss.org/

http://960.gs/

答案 2 :(得分:1)

我认为你迈出的第一步是研究使用某种CSS框架。根据维基百科的说法,这种框架的目标是“允许更容易,更符合标准的网页样式”,听起来就像你所要求的那样。

对于使用的 CSS框架,我不能自己推荐任何东西。

答案 3 :(得分:1)

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

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

答案 4 :(得分:1)

我建议使用CSS框架开始使用。您将为您的页面获得一个很好的网格结构(比如专业人士使用的大名称),并在您习惯了框架后迅速加快开发时间。

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

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

答案 5 :(得分:1)

除了框架之外,为了实现跨浏览器兼容的站点,我建议您最初定位符合标准的浏览器(如Firefox),然后只有在它工作之后,才能将支持扩展到不太符合标准的浏览器(如IE6)。

我的经验是,最初针对非标准浏览器(如IE6)并使网站跨浏览器兼容是非常困难的(几乎不可能)。

答案 6 :(得分:1)

制作纯CSS布局的工作真的没有秘密的职业酱。有很多方法可以在CSS中布置网站,而且真正需要的是对该技术的充分理解。

有些人在框架方面取得了成功。我无法确定它们是否是一个好主意,但一个好处是它们抽象出了构建CSS网站的一些细节。

但无论如何你应该学习它。我建议有两个网站真的想坐下来了解CSS是如何运作的:

SitePoint CSS Reference: Concepts   - 可能是一篇易于阅读的指南中关于CSS如何工作的最全面的解释

W3 CSS 2.1 Spec - 艰难的阅读,但它确实解释了一切如何运作

答案 7 :(得分:0)

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

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

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

非常有用的资源:http://csswizardry.com/web-design+/