css - 当前格式化网页的最佳实践是什么？

Question

我已经好几年没有做过任何真正的网页设计了，现在我的任务是创建一组需要相对复杂(且精确)布局的网页。我已经开始探索 CSS，虽然我开始了解如何使用它，但它似乎并不是适合我需要的布局类型的工具。

我需要的布局有顶部、中间和底部部分，每个部分都分为不同的区域。我需要类似的东西:

35%、35%(右对齐)、15%、15%

70%、15%、15%

70%、15%、15%

百分比是浏览器宽度的，如果列末端的百分比与上方/下方的行相同，则列边缘需要相交。此外，无论我在其中放入什么内容，行都必须位于彼此下方。

CSS 似乎可以满足我的要求，但是当我开始尝试实现所需的复杂性时，我无法使列匹配，或者行流入其他行，等等。

我真正想要的是像框架这样的东西，我可以将元素精确地放置在我想要的位置。这是否存在，或者我只是与 CSS 作斗争？

谢谢

肖恩。

Answer 1

你需要学习 CSS，而不是对抗它。 CSS 已用于创建比您所描述的复杂得多的布局。这是您设计网页样式和实现布局设计的唯一方法。

与框架相比，CSS 使您能够更好地控制网页的呈现和元素的定位(框架仅提供用于加载多个页面的框架；您仍然需要单独设置这些页面的样式)。

这是一个相当广泛的问题，所以我只想说:

• 使用 HTML 按语义组织/构建您的内容。
• 使用 CSS 进行演示。

换句话说，请勿使用以下任何标签或类似标签:

• <b> (使用 <strong> 代替)
• <i> (使用 <em> 代替)
• <font>
• <u>

记住在适当的地方使用结构化标签，例如:

• <h1>高达 <h6>
• <p>
• <blockquote>
• <pre>

并使用语义正确的标签。因此，如果您有定义列表，请使用 <dl> , <dt>和<dd> 。如果您有表格，请使用 <label for="{input id}"> ，例如:

<label for="first-name">First Name:</label>
<input name="first_name" id="first-name" />
<!-- when the user clicks on the label, the input will receive focus -->

不要使用表格进行布局。仅将它们用于表格数据。当您这样做时，请确保使用正确的语义标记 <thead> , <th> , <tbody>等

把 title链接中的属性和 alt图像中的属性以提高可访问性和可用性。

并使用样式表(最好是外部样式表以实现 DRY)而不是内联样式。

最后，正如 Jan_V 提到的，w3schools.com是 CSS、JavaScript、HTML 和大多数 Web 标准的重要资源。有很多东西需要您学习，但幸运的是，网络上有大量教程、引用资料和其他资源可以帮助您。了解如何正确使用 CSS/HTML，您将制作出更高质量的网页并节省维护时间。

如果您对自己想要的布局感到困惑，请从更简单的开始，然后逐步完善。例如。首先尝试均匀绘制的 2 列、2 行布局。一旦你开始工作，开始改变比例并添加更多的列/行。