面向开发人员的CSS/HTML教程/手册

Question

我是一个偶尔编写CSS/HTML代码的软件开发人员。我目前正在开发一个应用程序，它需要一个相当复杂的基于html/css的布局，我觉得我对CSS/HTML布局的理解不够，无法实现它。你能推荐我哪些书和教程来提高我的技能？

附言:我知道块元素和内联元素之间的区别是，什么是浮动，等等，但我缺少的是一个连贯的图片，它是如何工作的，以及如何在html/css中布局任意内容。

另外，我以前试过几本书，它们要么有一个参考手册格式(像这样：http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040)，要么包含我已经知道的信息，例如w3schools上的大多数基本教程，亚马逊上的大多数假人书等等，或者更糟的是面向设计师的。我不需要阅读颜色等内容，我只需要学习如何在HTML/CSS中进行布局，就像我在Java/Swing或其他类似框架中所做的那样。

Answer 1

让我先说一下，我更喜欢根据需要在线查找参考资料(我将我的知识存储在云中)，而不是背诵一整本关于css属性的书，因为这可能看起来完全断章取义；同时，我发现深入阅读更高层次的理论和指南更有好处，无论是专题文章还是书籍。

你有没有得到一个全面的风格指南，或者甚至是几个模型，现在就看你把它变成html+css了吗？在这种情况下，我建议

• Handcrafted CSS: More Bulletproof Web Design -最重要的是，它涵盖了一些更“时髦”的技术，比如liquid layout，并让你适应优雅降级的概念(这意味着IE6和FF10不应该提供相同的体验)。从长远来看，这省去了你的头疼和心碎--我的作品非常受欢迎，以至于一位同事把它带到了海外……对于八个months
• CSS: The Missing Manual和HTML, XHTML and CSS Bible -相当深入，材料还没有过时。我建议先阅读floats (无论以前的经验如何，那里有许多怪癖)，以及任何你觉得自己有知识空白的章节。除此之外-用作具有一般概念的reference.
• Comfortable，但需要查找偶尔的属性？首先，w3schools是邪恶的-使用MDN代替。无关:非常棒的JS参考以及CSS/HTML，你现在是after.
• Bookmark、quirksmode和caniuse，所以当一个主要的浏览器突然拒绝呈现你的轮廓分明的代码时，你不会退后太远。如果设计合适的话，网格系统将是一种极好的节省时间的方法；再加上jQuery-UI或formalize，你就可以解决常见的问题(看看你，表单布局！)。

如果你想更深入地挖掘，更好地理解成功产品背后的设计原则和可用性概念，或者如果你还没有想出线框/页面模型等，阅读列表将会扩大：

• The Non-Designer's Design Book -如果我可以给它加票一百次，我会的。没有水，易于理解的章节，专注于设计基础(对比度，重复，对齐，接近)，最终将有助于一致的，可读的网站(或印刷媒体)
• 你还想要更多吗？阅读Universal Principles of Design -我们现在偏离了“一般”的设计领域，但大多数想法都是用Don't Make Me Think!: A Common Sense Approach to Web Usability来完成列表，这正是

。

记住stackoverflow -如果你遇到了一个问题，可能有人已经解决了它:)

Answer 2

我推荐阅读http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/。

这可不是一篇小文章。这是一篇非常详细、深思熟虑的文章，描述了浏览器的几个方面。您可能会对以下内容感兴趣：

布局(尤其是end)

• Chapter 9 - CSS2可视化模型(

parts) )

Answer 3

我建议你看看这篇教程。

• https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

这是一个30天的HTML/CSS课程的Jeffrey的方式，他解释了你需要的一切非常好，以一种很好的方式，它的最好的地方，它是免费的(你需要注册一个免费的帐户，目前在右上角)。

替代方案：

• http://www.quackit.com/html/tutorial/
• http://www.csstutorial.net/

但是网上有很多学习html和css的资源。