Question

新手问题在这里。我正处于基于我所做的草图在HTML / CSS中布置网站的开始阶段。所以我在主页上计划我的DIV，我想知道如何命名它们以及哪些元素应该有自己的容器。到目前为止，我有以下内容：

容器（包含页面上的所有内容）
标题（将包含徽标和链接，可视化连接）
页脚
内容（这将只包含播放音轨的小部件）

现在，我还希望在我的页面的右侧，在一个侧栏中，还有其他三个元素：

包含来自我博客的RSS源的标题/描述的框
包含即将发生的事件的几个日期的框
包含指向其他网站的链接的框

我正在寻找关于那些“侧边栏”元素处理DIV的最佳方式（我猜最“语义”）的意见。由于我的计划是将这三个框对齐，我应该创建一个主“侧边栏”DIV，然后为每个元素创建单独的DIV（“feed-box”，“events-box”和“链接盒子”？或者应该没有“侧边栏”DIV（这不是暗示风格/位置吗？），而只是使用三个特定的DIV？

另外，我应该给那个包含音频小部件的框一个“内容”的ID（即使我确切知道它会发生什么），还是应该像“audio-widget”？（谁知道，也许一年之后，它会保留其他类型的内容。）

您认为这种命名的最佳做法是什么？我意识到没有一个正确的答案，而且过于依赖这些名字可能是迂腐的。但处理这个问题的“最佳”方式对我来说并不明显，我想从一开始就明白为什么我采用给定的命名约定

感谢。

Answer 1

您需要问的第一个问题是：您的布局是固定的还是可变宽度？

如果它是固定宽度，通常的做法是将所有内容包装在一个整体div中（通常称为“容器”或“包装器”）。你已经有了这个。

如何布置其余的div然后会影响它们在文档中出现的顺序（例如，使用浮动倾向于“反转”自然顺序）。

我可能会有这样的事情：

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="sidebar">
    <div id="headlines"></div>
    <div id="events"></div>
    <div id="links"></div>
  </div>
  <div id="footer"></div>
</div>

基本的CSS：

html, body, div { margin: 0; padding: 0; border: 0 none; }
#container { width: 960px; margin: 0 auto; }
#content { width: 760px; float: left; }
#sidebar { width: 200px; float: right; }
#footer { clear: both; }

Answer 2

唯一正确的答案是使用尽可能少的容器来完成工作。然后提供ID值只记得每个ID值必须是唯一的。不要添加额外的div元素只是为了有额外的命名约定。 div是一个语义元素，其含义是文档的一个分区，经常被滥用。

Answer 3

以下是我的建议。我更喜欢保留id="container"保留并可用于内容（而不是页眉或页脚）部分<div> ID。这样内容部分id元素可以使用id="content"，我不必担心冲突。

<div class="container">
  <div class="header">
    <div class="headerLeft"></div>
    <div class="headerMiddle"></div>
    <div class="headerRight"></div>
    <div style="clear:both"></div>
  </div>
  <div class="content">
    <div class="contentLeft"></div>
    <div class="contentMiddle">
      <div id="style" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Style
      </div>
      <div id="content" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Content
      </div>
      <div id="originality" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Originality
      </div> 
    </div>
    <div class="contentRight">
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
    </div>
    <div style="clear:both"></div>
  </div>
  <div class="footer">
    <div class="footerLeft"></div>
    <div class="footerMiddle"></div>
    <div class="fooderRight"></div>
    <div style="clear:both"></div> 
  </div>
</div>

1）上面的示例可能会重新呈现网页的整个内容部分，而不是仅当该容器还具有id="content"时，如果使用id属性而不是class。

2）如果您可能希望拥有更多的一个Feed-box或其他多次出现的元素，那么类是唯一的方法。每页只能使用一个id，但可能会出现很多classes。

一些基本的CSS来设计它：

.container { width: 960px; margin: 0 auto; }
.header{ background-color:#000000; color:#FFFFFF; }
.headerLeft{ width:0px; float:left; }
.headerMiddle{ width: 960px; float:left; }
.headerRight{ width: 0px; float:right; }
.content { background-color:#000000; color:#FFFFFF;}
.contentLeft { width: 200px; float: left; color:#FFFFFF;}
.contentMiddle{ width: 680px; float: left; min-height:550px; background-color:#FFFFFF; color:#000000;}
.contentRight{ width: 180px; float: right; color:#FFFFFF;}
.footer { background-color:#000000; color:#FFFFFF; }
.footerLeft { width:0px; float:left; }
.footerMiddle { width: 960px; float:left; }
.footerRight { width: 0px; float:right; }
.feedBox {}
.eventsBox {}
.linksBox {}

在初始布局中命名DIV的最佳实践

3 个答案: