如何设计具有div和span的网站（而不是表格标签）[关闭]

Question

我是网站设计世界的新手！

我想在<div>和<span>而不是<table>标签的帮助下布置我的整个网站。

你能推荐一些有助于我设计的好文档吗？

谢谢。

Answer 1

我认为下面的教程会对你有所帮助。 尝试在没有表的情况下在css中进行此布局。

摘要介绍：http://www.htmlite.com/SD008.php

中等水平（但更详细的介绍）http://www.hotdesign.com/seybold/everything.html

很多细节：http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

高级 - 信不信由你现在也有（坐在这里） - 实际的css表！新 http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

正如Strelok指出的那样，HTML表现在仍然有一个位置，只需将它们保存为真正的“表”数据 - 例如：公交时刻表，交易明细，用户列表等。

Raffael提供的float tutorial参考资料也非常适合学习这一领域。谢谢拉斐尔！

还应该要求所有Web开发人员阅读Johannes提供的最佳实践链接！ http://www.iraqtimeline.com/maxdesign/basicdesign/principles/prinlayout.html

Answer 2

我认为你误解了这个问题（从阅读互联网上可能有些过时的资料）。

表对于显示表格数据很有用，因此将它们用于此目的是有意义的。

当然，您的主要布局将使用<div>标签，但您必须使用工具箱中的每个工具来设计一个易于维护的优秀网站。你不能只说，我只会使用<div>和<span>。您将使用适当的元素来完成他们设计的工作。用于表格数据的表格，用于布局的div，用于显示文本片段的跨度，用于链接的锚点，用于列表的ul标签等。

Answer 3

一些资源，我的头脑：

• 960.gs - 960px grid
• cssgrid.net - 1140px grid by Andy Taylor
• Rethinking css grids - Mark Boulton
• Relevance of the baseline grid - Elliot Jay Stocks
• Page Layouts, best practices in web design
• css layouts - MaxDesign
• Modern css layouts, essential techniques - Smashing Magazine

Answer 4

我可以推荐你这个float tutorial或你可以在http://css.maxdesign.com.au/上找到的任何其他教程。

Answer 5

将Photoshop PSD更改为HTML（DIV）

我认为这就是你的意思，它是一个如何用PSD制作HTML 2.0的教程：http://www.bolducpress.com/tutorials/from-photoshop-to-html/