Question

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

我需要的布局有一个顶部，中间和底部，每个部分分为不同的区域。我需要的东西有点像：

35％，35％（右对齐），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行布局。完成后，开始更改比例并添加更多列/行。

Answer 2

CSS可以做任何你想做的事情，它是 defacto工具，用于在网页上定位和设置元素。我认为您应该根据您的描述研究位置：绝对和浮动功能。它的难点在于跨浏览器获得一致的行为/解释。强烈建议使用像YUI's这样的css-reset来帮助解决这个问题。 YUI还有javascript utilities，可帮助规范浏览器中的某些CSS行为（例如浮点和不透明度）。 YUI绝不是实现这些目标的唯一途径。

Answer 3

您可以尝试使用表格进行布局，但我建议使用CSS和DIV元素。如果你打算使用框架或桌子，你可能会遇到麻烦（可能）。另外，CSS并不是那么难，只花一点时间学习它，也许是W3Schools，它有很好的教程。

Answer 4

请记住使用与CSS相关的表会导致可访问性问题。这意味着使用辅助功能浏览您网站的用户将无法使用屏幕阅读器。

我同意以前的一些答案。花时间了解CSS。如果写得正确，则意味着您的样式可以重复使用，并且一旦完成就可以轻松实现和更改。尝试更改在多个页面上单独编码的样式会让您感到头疼。

如果您的网站变得复杂，请尝试确保尽可能简化维护，CSS肯定会帮助您。

格式化网页的当前最佳做法是什么？

4 个答案: