8

我是一名 Web 开发人员，在我的项目中，我注意到我的弱点是不擅长前端设计。如果他们不能像我想要的那样快速生产，那么依赖其他设计师可能会很烦人。

我对 HTML/CSS 的看法是，它基本上是一个非常有效的大 hack。有太多的 CSS 和浏览器特定的错误/怪癖需要学习和记住它们，而无需花费大量时间试图解开所有东西。有没有让 CSS 进入我大脑的捷径？我看过一些 CSS 书籍，但对我来说，它们确实读到了关于如何在 IE6 中正确呈现事物以及如何使角落变圆的长列表。（说真的，为什么需要这么多的技巧来做一个尖角？在除 Web 之外的任何平台上，这都被称为重大疏忽。）

是否存在类似于 jQuery 为 JavaScript 所做的 CSS 的东西？使用 jQuery，您无需非常了解 JavaScript 即可使事情正常工作。

我对了解为什么 IE6 以奇怪的方式做事不感兴趣，因为我根本不关心支持它。我更感兴趣的是一种学习如何使用 CSS 做我想做的事的方法，而无需花费数小时阅读晦涩难懂的博客。

4

6 回答 6

5

用铅笔和纸勾勒出你的想法（用方框来思考，而不是三角形或六边形），然后分解所有的小部分并学习如何去做。没有大到不能分解的问题。而且，像往常一样，TMTOWTDI！

找到例子并从中学习——至少我是这样开始学习的。研究使用的样式并尝试使用它们。当您找到可以做您喜欢的事情时，请创建一个模型并玩弄它。然后测试它的跨浏览器兼容性。

如果您因为某些东西在 Firefox 和 Chrome 中有效，但在 IE 中无效（这种情况经常发生）而感到沮丧，请不要放弃。我发现诅咒比尔盖茨的名字，他所代表的只是一个很好的减压器。:-)

我喜欢使用的一个很棒的工具是Firebug，它是 Firefox 的一个插件，它允许您在浏览器中编辑 CSS 规则并在执行后立即查看结果。

我同意 CSS 在网页设计世界中是一种事后的想法，但它是一个地狱般的发明，让事情变得更容易和更快地开发。

于 2009-12-24T22:35:43.560 回答
4

是的，有一些 CSS 框架是“CSS 的 jQuery”。一些比较流行的包括960和Blueprint。我个人使用 960，发现它需要大量的布局猜测。

正如其他人所说，CSS很难通过阅读来学习。它最终成为你需要通过大量经验培养本能的事情之一（这通常意味着大量的试验、错误和挫折）。正如您所强调的，这不是一个理想的情况，但它就是这样。

另一个困难是所采用的方法或工作流程在个人之间可能确实不同。有些人首先在 Photoshop 中制作模型，然后使用 HTML/CSS 生成精确的逐像素“渲染”。其他人则使用 Photoshop、Illustrator 或其他工具简单地勾勒出想法，然后在 HTML/CSS 中从头开始重新创建它。还有一些人更喜欢直接从 HTML/CSS 和一些缩略图开始。找出这些方法中的哪一种最适合你是另一个重要的难题。

于 2009-12-24T21:53:07.477 回答
2

这几乎需要时间和练习。但是如果你保持你的 html 简洁明了，你可以为自己省去很多麻烦。以下是我能想到的一些对我有帮助的规则：

  • 在您的 html 页面中使用 DOCTYPE，从过渡开始，因为它具有最宽松的规则，并验证您的 html。如果您将页面保持在标准模式而不是 quirks 模式，那么您遇到的问题将会大大减少。
  • 选择您将早期支持的浏览器并按逻辑顺序支持它们。对我来说，我在 Firefox 中开发，然后确保在 chrome / safari 上运行稳定。IE 可以使用一种特殊的注释，让您插入仅对 IE 可见的 html。使用它为 IE7 添加样式表，然后在 IE6 中覆盖样式并修复这些浏览器中的任何显示问题。您通常应该先从最好的浏览器开始，然后向后工作。
  • 小心填充。这是我处理过的最有问题的属性之一。如果可以，请选择使用带有边距的小子容器元素来代替填充。它的标记更多，但所有浏览器的边距处理得更好。
  • 相对定位元素内部的绝对定位元素。这解决了很多问题。当您相对定位一个元素时，它会保持正常流动。当您在相对的父级内绝对定位元素时，绝对项将参考父级的位置工作。
于 2009-12-24T22:42:16.040 回答
1

在这种情况下，我认为书籍不会有太大帮助。CSS 极易学习，但极难掌握。

我只能建议你边走边学。你需要很多经验！

或者，您可以放弃对 IE7 尤其是 IE6 的支持。如果你这样做，你会发现非常少而且非常罕见的怪癖:)

于 2009-12-24T21:49:29.563 回答
1

参加一些平面设计课程。没有任何编程语言能让你成为艺术家，良好的用户界面设计需要艺术性。

[或者你可以找到更好的平面设计师合作]

于 2009-12-25T01:06:35.967 回答
1

订阅css-discuss，解决常见问题并与其他人讨论您的进度。wiki也是一个非常有用的资源。

于 2010-03-25T23:00:51.897 回答