6

在开发网站时，我一直在阅读有关最佳实践的信息。但我仍然很好奇，因为找到的答案大多是多种多样的，取决于项目的范围和许多其他考虑因素。

但为了简短起见，基本上我想询问网站中 3 个主要元素的正确格式。

  1. 标题
  2. 主体
  3. 页脚

结构应该如何构建？这三个是否应该包装在这样的容器中：

<div class="wrap">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

样式应该如何做？我看到有些人建议对 CSS 使用 position:absolute，而另一些人则使用 relative。很抱歉这个非常基本的问题，但在我目前的学习阶段，我对此感到非常困惑。

4

5 回答 5

4

存在像拥有大量包装器这样的伪标准的唯一原因是因为它已被证明在创建布局时很有用。基本上，这一切都是有原因的。如果您可以设计您想要的页面而无需<div id="mainwrapper">围绕它 - 那么您不需要像这样的主包装器。:)

我的建议是简单地开始创建一个站点，并尝试使用简单的元素和 CSS 样式让它看起来像你想要的那样。如果你不能让它工作——例如你不明白如何创建一个流动的列布局——那么只需在网络上搜索“HTML 流动列布局”之类的东西，然后从那里开始。

编辑： “让它工作”通常意味着不必使用表格、大量幻数和大量元素来创建简单的东西。

经验法则：如果您不了解1)他们做了什么2)为什么需要它们，请不要剪切和粘贴代码/解决方案。最好自己尝试构建它，然后在使用它时意识到为什么某些模式（clearfix、避免表格、浮动布局等）如此普遍。它现在可能无法节省您的时间，但从长远来看，它肯定会让您成为更好的开发人员。

于 2012-07-31T11:43:30.947 回答
2

HTML 布局非常主观，这取决于您作为开发人员的要求/偏好。两种主要布局是静态（使用绝对定位等）和浮动（使用浮动 div 进行液体布局）。

这是一篇很好的文章，更深入地介绍了这些原则

基本上，您应该使用块级元素（即div标签）来构建您的页面。如果您有表格数据表非常好，但不要将它们用于您的布局，因为它们渲染速度很慢，并且当您需要完全控制页面布局时可能会使事情变得困难。

样式的最佳实践建议您使用 CSS 通过类属性而不是内联来定位和设置元素的样式。然后，这将允许您缩小 CSS 脚本并减少页面的开销。CSS 发展得非常好，有很多选择器可供您使用，以减少标记中的类数量。有关它们的更多信息，请参阅W3C 的 CSS 选择器。

于 2012-07-31T11:47:50.720 回答
1

在编写 HMTL 时，您需要牢记标记的可读性以及将来更改它的难易程度。

尝试并牢记关注点的分离。您网站的哪些部分在结构上与其他部分相关，哪些部分不依赖于其他部分。尝试将依赖元素组合在一起（使用 div 等）并将不相关的元素分开。

尝试以类似的方式构建您的 CSS，如果 2 个元素位置依赖于另一个，但另一个不依赖，则将相关元素分组到一个类下，然后使用继承来构建差异。其中不相关的可能应该完全在一个单独的 CSS 类中。

还可以尝试构建您的 CSS，以便可以重复使用。

有点笼统，但希望它会有所帮助？

于 2012-07-31T11:49:23.980 回答
1

有很多网站提供各种 SEO 友好的布局，它们都提供 css

http://www.searchenginefriendlylayouts.com/

http://www.davidjrush.com/blog/2011/02/seo-friendly-two-column-layout/

http://matthewjamestaylor.com/blog/perfect-3-column.htm

于 2012-07-31T11:55:44.647 回答
1

HTML 5 示例。现在一天最好的布局宽度是 960。.content{ width:960px }

<!-- Outer Div -->
<div id="content">
    <!-- Inner Content -->
    <div id="content-inner">

        <!-- header -->
        <header>
          <div class="header">
            <div id="header_wrapper"></div>
          </div>
         </header>

         <!-- body -->
         <div id="content-body">
            <section></section>
            <section></section>
         </div>
    </div>

    <!-- footer -->
    <footer>
         <div class="footer">
            <div id="footer_wrapper"></div>
          </div>
    </footer>

</div>
于 2012-07-31T12:08:02.697 回答