Question

我有以下页面结构

<div id ="site-wrapper">
  <div id ="banner">

    <div id="menu">   
       <center>Menu Goes Here</center>
    </div>

  </div>

  <div id="content">
      <center>Content Goes here</center>
  </div>

  <div id="sidebar_r">
    <center>Right sidebar</center>

    <div id="sidebar_top">
      Sidebar top
    </div>

    <div id="sidebar_middle">
      Sidebar middle
    </div>

    <div id="sidebar_bottom">
      Sidebar bottom
    </div>

  </div>

</div>

我如何构建css。我已经为所有div使用了id有没有更好的方法呢？

Answer 1

htmldog's css for beginner

Answer 2

查看html5规范 - http://www.whatwg.org/specs/web-apps/current-work/multipage/

您可以使用“标题”，“页脚”，“导航”和“部分”等元素。这将减少你必须在你的CSS中设置的id的数量，并使你的标记更具语义。

同样，堆叠了大量的css选择器会有性能损失。

关于你的问题！

一个示例css结构可能是..

#menu center { ... }
#sidebar_r center { ... }

尽量不要发狂

#site-wrapper #banner #menu center { ... }

如果您想将＃site-wrapper重命名为#container，那么您的css解析器会有更多工作待办事项并且您的css变得不易管理。

我的经验法则是......

如果元素是容器或仅出现一次，则使用id 如果元素出现多次，例如li，则使用一个类。使用标签，我只使用id或类，如果需要的话。你可以随时添加它。

Answer 3

我建议您使用<center>代码替换<span>代码，然后在css中应用text-align:center样式。至于构建你的CSS ...它取决于它应该如何看。你能更具体一点吗？

Answer 4

下载其中一些模板并研究他们如何设置网站布局：

http://www.freecsstemplates.org/

http://www.templatemonster.com/free-templates.php

Answer 5

你可以同时使用ID和Class作为css，但要记住一个ID比class更具特异性的东西。所以每当你使用类时，你可以一次使用多个类，但如果你使用的是ID，那么你可以使用一个ID。在编写css之后获得更好的CSS，使其通过w3c css验证器进行验证。要了解css特异性，请检查此链接并确定您的css是什么。

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 6

最简单的是，您需要使用的是：

#sidebar_r {
    float: right;
}

div和css结构

6 个答案: