如何更好地使用CSS、布局设计和UI编程？

我非常熟悉CSS，使用了很多javascript和jquery，也没有多少布局设计经验，也没有与Photoshop密切合作。但是，不知何故，当我用数据库或C#side编程时，我感觉没有那么自信，当我设计UI并按照我想要的方式布置元素时，我会面临很多问题，例如，设计师给你的.psd文件……你想让你的页面看起来完全像那样

---

所以我知道我必须要做得更多，并在这一过程中不断学习。但是有没有人有什么好的建议或建议让我在UI编程方面变得更好…如果有一些网站有视频和教程或任何好书我应该参考改进..谢谢大家的帮助..

如果你总是问自己是否能以更好的方式做某件事，并且有疑问时，你可以通过实践来学习用谷歌查这个东西

---

然而，你会发现书给了你一个更完整的整个过程的画面，教给你很多个人博客帖子无法教给你的东西。互联网就像一个参照物；你必须知道要寻找什么，但这本书将为你提供一些你可能没有想到的有用提示。

练习，练习，练习

我会在网上浏览现有的模板或网站，并尝试复制它们进行实践

显然，尊重作者的权利，不要重新创建某人的主题，然后在你的网站上使用它，除非它真的向公众发布。

我会研究“语义HTML”

还将查看doctype：

这两件曾经掌握的东西帮助我编写了正确的x浏览器css，当你需要它时，它可以看起来完全像comps

我想说的是避免模板化，除非你的设计师总是为UI做相同的站点布局，否则你会希望更加敏捷

---

对于初学者来说，一个有助于x浏览器css的好东西是一个很好的重置。css:

我还将探索UI可用性领域。是一个很好的来源。

我在两年前安装了firebug并立即发现自己花了更多的时间阅读其他人的代码-如果我看到一个我喜欢的网站或我想使用的技术，我只是firebug它-这有点像一个音乐家阅读乐谱并想象它的声音

我发现在这个网站上回答问题对我也有很大帮助——你可以确切地知道你知道的是什么，你也会更加意识到你需要改进的地方

我认为了解框模型如何工作以及如何使其在所有浏览器中都适用非常重要-有一些非常简单的基本规则，如果遵守这些规则，帮助您确保您的x-broswer测试是无痛苦的-知道如何在不破坏布局的情况下添加填充或边距允许您精确地进行设计-我曾经在容器中留出20像素的额外水平空间，以使我的列从不从页面边缘脱落，但是现在我知道了盒子模型是如何工作的，我可以使用在我得到的实物模型中详细描述的确切宽度、高度、填充和边距

我个人建议使用语义样式表框架——我建议使用Blueprint semantic（尽管YUI和960也很棒）——事实上，切换到CSS框架可能是我去年对编码风格所做的最重要的改变之一，它帮助我认识到，几乎所有我遇到的x浏览器问题都很容易解决，没有太多麻烦

如果您还没有这样做，请在stackoverflow中将“CSS”和“HTML”添加到“有趣的标签”列表中，并尽可能多地阅读。回答问题，在下巴上记下向下的选票，品味向上的选票，并继续努力帮助别人解决他们的问题

---

很多人忘记的一件事是：CSS实际上是一种非常复杂的语言。还有很多东西我看了就知道了，很难掌握——只是。坚持。战斗。很好。战斗。我想看看。

我也有过一段时间的挫折感（我想很多人都有）。减轻了一些挫折感的一件具体事情是学习类和ID的重要性（即ID使javascript更容易，类促进大规模更改）。这听起来可能很简单，但对我来说是一大步。我想我想说的是，你只需要花时间和它在一起。不要因为害怕或沮丧而退缩。这只需要时间。

+1对于Firebug。它是UI设计器的必备工具！我会说，抛弃CSS框架。它们只是一种发展援助，事实上，这并不能帮助你学到任何东西。哈@Yi-从你的回答中，我看到你对CSS了解很多：）我必须承认，我需要一个框架的指导来学习最佳实践-我在一个名为Ruby gem的Ruby gem中使用Blueprint，它有关于某些东西如何工作以及为什么工作的优秀文档-但是是的，你的目标应该是在没有框架的情况下编写出足够好的代码——但当你做到这一点时，你意识到框架也为Firebug节省了那么多时间+1。我在谷歌上问了一个类似的问题，来到了这个页面，即使它因为版主的傲慢而关闭了。：-）