Css 什么';当前格式化网页的最佳做法是什么?

Css 什么';当前格式化网页的最佳做法是什么?,css,Css,我已经有几年没有做过任何真正的网页设计了,现在我的任务是创建一组需要相对复杂(和精确)布局的网页。我已经开始探索CSS,虽然我开始了解如何使用它,但它似乎并不适合我需要的布局类型 我需要的布局有一个顶部、中部和底部部分,每个部分都被分解成不同的区域。我需要的东西有点像: 35%,35%(右对齐),15%,15% 70%、15%、15% 70%、15%、15% 百分比为浏览器宽度,如果列端点的百分比与上面/下面的行相同,则列边缘需要相交。此外,无论我在行中放置了什么内容,行都必须彼此位于下方 CS

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

我需要的布局有一个顶部、中部和底部部分,每个部分都被分解成不同的区域。我需要的东西有点像:

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

70%、15%、15%

70%、15%、15%

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

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

我真正想要的是像框架一样的东西,在那里我可以准确地将元素定位到我想要的位置。这是存在的,还是我只是在与CSS斗争

谢谢


Sean.

CSS几乎可以做任何你想做的事情,它是在网页上定位和设置元素样式的实用工具。我认为您应该根据您的描述查看位置:绝对和浮动功能。它的困难在于跨浏览器获得一致的行为/解释。强烈建议使用类似css的重置来帮助实现这一点。YUI还有助于跨浏览器规范一些CSS行为(例如,浮动和不透明度)。YUI决不是实现这些目标的唯一方法。

您可以尝试使用表格进行布局,但我建议使用CSS和DIV元素。 如果你打算使用框架或表格,你以后可能会遇到麻烦。而且,CSS也没那么难,只要花点时间学习它,也许还有一些学校,它们有很好的教程。

你需要学习CSS,而不是与之抗争。CSS被用来创建比您描述的更复杂的布局。这是你设计网页样式和实现布局设计的唯一方法

CSS比框架更能控制网页的显示和元素的定位(框架只提供用于加载多个页面的框架;您仍然需要分别设置这些页面的样式)

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

  • 使用HTML对内容进行语义组织/结构
  • 使用CSS进行演示
换句话说,不要使用以下任何标记或类似标记:

  • (改用
  • (改用
记住在适当的地方使用结构化标记,如:

并使用语义正确的标记。因此,如果您有定义列表,请使用
。如果您有表单,请使用
,例如:

名字:
不要将表格用于布局。仅将表格用于表格数据。当您这样做时,请确保使用正确的语义标记
,等等

title
属性放在链接中,将
alt
属性放在图像中,以便于访问和使用

使用样式表(最好是干的外部样式表)而不是内联样式

最后,正如Jan_V所提到的,它是CSS、JavaScript、HTML和大多数web标准的重要资源。有很多东西需要你学习,但幸运的是,网上有大量的教程、参考资料和其他资源可以帮助你。了解如何正确使用CSS/HTML,您将生成更高质量的网页,并节省维护时间


如果你正在为你想要的布局而挣扎,那么从简单的开始,然后逐步向上。例如,首先尝试均匀绘制的两列两行布局。一旦你开始工作,开始改变比例并添加更多的列/行。

记住,使用CSS对应的表格会导致可访问性问题。这意味着使用可访问性浏览网站的用户在使用屏幕阅读器时会遇到问题

我同意前面的一些回答。花时间了解CSS。如果写得正确,就意味着你的风格将是可重用的,一旦你完成了,就很容易实现和更改。试图改变在许多页面上单独编码的样式会让你头疼


如果您的网站将变得复杂,那么请尝试并确保您的网站尽可能易于维护,CSS肯定会在这方面为您提供帮助。

使用表格进行布局在语义上是不正确的,应予以劝阻。表格仅用于表格数据。它现在不受欢迎,但在过去被大量使用。如果他发现使用合适的css、div和span太麻烦,那么这总是一个选择。当然不是最好的做法。我不知道,如果这是一个个人网站,那么也许可以,但如果他这样做是为了工作,那么我甚至不认为这是一种选择。这部分是因为如果他想在未来做更多的网络工作,他无论如何都需要学习这些东西。其实也没那么难。如果你开始说表是可以的,那么可能会导致刚开始学习CSS的人太容易放弃。Sean,如果你发布一个演示,展示你到目前为止的成果,我经常看到人们会将其重构为工作代码。请看:我想指出css和基于表格的布局并不是对立的力量。将您的内容放在一个表中是有意义的
<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 -->