我在几年内没有做过任何真正的网页设计,现在我的任务是创建一组需要相对复杂(和精确)布局的网页.我已经开始探索CSS,虽然我已经开始了解如何使用它,但它似乎并不像我需要的布局那样合适的工具.
我需要的布局有一个顶部,中间和底部,每个部分分为不同的区域.我需要的东西有点像:
35%,35%(右对齐),15%,15%
70%,15%,15%
70%,15%,15%
百分比具有浏览器宽度,并且列末端的百分比与上/下行相同,列边缘需要满足.此外,无论我放入哪些内容,行都必须在彼此之下.
CSS看起来像我想做的那样,但是当我开始尝试我需要的复杂性时,我无法获得匹配的列,或者流入其他行的行等.
我真正想要的是框架,我可以将元素准确定位在我想要的位置.那是否存在,或者我只是与CSS战斗？
谢谢,
肖恩.
你需要学习 CSS,而不是去战斗.CSS已被用于创建比您所描述的更复杂的布局.这是你应该设计网页样式和实现布局设计的唯一方法.
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行布局.完成后,开始更改比例并添加更多列/行.