如何制作好的CSS布局

Question

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

喜欢这个网站是一个很好的起点：

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

先谢谢！

Answer 1

我建议你先阅读一些史诗文章：

• 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和 苹果浏览器。我们附近有IE8（仅限 没有CSS3的东西）。你的艰难之路 将是IE7，但它不是那么多 远离IE8。

• 按受众群体选择您的浏览器 图形like this。 我不再关心IE6了 我也不再关心IE7了。

• 使用table并非犯罪行为。表 是为表格数据创建的，即 网格，超过2的列表 列等

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

• 使用div也可能构成犯罪。 “无表”并不代表“Divmore”。 你的标记必须干净 语义永远。数十个div是如此 表格可能不好。

• 阅读W3C Specs和 了解像你这样的网络标准 了解你自己的名字。

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

祝你好运！

Answer 2

那里有很多好的资源。以下是我过去使用的一些列表：

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