如何做出好的CSS布局

Question

我目前知道一些CSS和HTML，我也做了一些网站。但我的网站的设计总是很糟糕，代码也是如此。我真的想制作非常漂亮的网站。有没有人有好的起点？

就像是这个网站好点开始：

http://net.tutsplus.com/articles/web-roundups/10-hand-picked-tutorials-for-beginning-web-designers/

在先进的感谢！

Answer 1

这里有很多很好的资源。下面是我在过去使用的几个列表：

http://www.smashingapps.com/2011/03/29/40-excellent-yet-free-css-tools-and-generators-for-developers.html

http://macrabbit.com/cssedit/

http://www.smashingapps.com/2010/04/19/10-excellent-free-web-apps-to-create-css-forms-and-grids.html

http://www.smashingapps.com/2010/07/27/top-17-websites-to-easily-generate-css-grid-layouts.html

Answer 2

我建议你先阅读一些史诗的帖子在这里：

• Why not use tables for layout in HTML?

• https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet

• Common Web UI Styles

• Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

• Fluid layouts with CSS

• How to make css smaller?

而且，总是心里有一些重要的事情：

• HTML必须是语义。创建您的 HTML结构像它意味着不是它 外观。

• 使用CSS进行所有定位。请记住 即float,position,z-index 和clear是你的朋友。

• 避免特定的浏览器黑客入侵。实际上，对于IE9，Chrome，Firefox，Opera和Safari浏览器，几乎所有的操作都可以完全实现 。我们附近有IE8（只有 没有CSS3的东西）。你的努力方式 将IE7，但它不是那么多远离IE8 。

• 请选择您的浏览器和 图形like this。 我不在乎IE6了， 我也停下来关心IE7。使用table不是犯罪行为。 被创造表格数据表，即 网格，具有多于2个 列列表等

• 使用table是犯罪行为。不要使用 它为您的布局结构，像 菜单，页眉，页脚等

• 使用div也可以是犯罪行为。 “无表”并不意味着“Divmore”。 你的标记必须是清晰的，并且必须是有语义的 。数十个divs如此 不好，因为表可能。

• 阅读W3C Specs和 了解你的网页标准 了解你自己的名字。

并总是讨论（在这里与我们或许多博客有关）为什么某种方法比其他方法更好。

祝你好运！