Question

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

但是为了缩短它，基本上我想问一个网站中3个主要元素的正确格式。

标题
主/身体
页脚

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

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

应该如何完成造型？我看到有些人建议使用position：绝对用于CSS，而有些人则使用相对而不是。对于这个非常基本的问题感到抱歉，但在我目前的学习中，我对此感到很困惑。

Answer 1

伪标准存在很多包装器的唯一原因是因为它在创建布局时证明是有用的。基本上这都是有原因的。如果您可以设计所需的页面而不需要<div id="mainwrapper"> - 那么您就不需要这样的主包装器。：）

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

编辑“让它发挥作用”通常意味着不必使用表格，大量神奇数字和大量元素来创建简单的东西。

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

Answer 2

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

This is a good article that covers these principles in more depth

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

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

Answer 3

在编写HMTL时，您需要牢记标记的可读性以及将来可以轻松修改的标记。

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

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

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

比较一般这些要点，但希望它会有所帮助吗？

Answer 4

有很多网站提供各种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

Answer 5

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>

适当的HTML结构

5 个答案: