css - 我正在遭受 "divitis"吗? (需要 CSS 专家)

标签 css html

<分区>

我读过很多谴责过度使用 div 的文章。我有一种感觉,我可能会在以下标记中这样做:

.container {
  margin: 0 auto;
  overflow: hidden;
  width: 960px;
}

/* header */

#header {
  background: #EEE;
}

#header h1 {
  float: left;
}

#header h2,
#header a,
#header p {
  color: #999;
}

#header h1 a {
  background: url(../images/logo.png) no-repeat scroll 0 0;
  float: left;
  height: 30px;
  text-indent: -9999px;
  width: 500px;
}

#banner {
  border-bottom: 1px solid #DDD;
  padding: 0 0 15px 0;
  margin: 30px 0 30px 0;
  overflow: hidden;
  width: 960px;
}

#lang {
  float: right;
  padding: 9px 0 0 0;
}

#lang li {
  float: left;
  margin: 0 0 0 20px;
}

#lang li a {
  font-size: 10px;
}


/* intro */

#intro {
  overflow: hidden;
  padding: 0 0 30px 0;
}

#tagline {
  float: left;
  margin: 0 40px 0 0;
  width: 540px;
  /* 560 */
}

#tagline h2 {
  font-size: 24px;
}

#about {
  float: right;
  width: 380px;
}
<div id="header">
  <div class="container">
    <div id="banner">
      <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
      <ul id="lang">
        <li><a href="index.php">English</a></li>
        <li><a href="es/index.php">Español</a></li>
        <li><a href="tw/index.php">中文(繁體)</a></li>
        <li><a href="cn/index.php">中文(简体)</a></li>
      </ul>
    </div>
    <div id="intro">
      <div id="tagline">
        <h2>Nulla vitae tortor mauris</h2>
        <p>Pellentesque faucibus est eu tellus varius in susc...</p>
      </div>
      <div id="about">
        <h2>right</h2>
        <p>Pellentesque faucibus est eu tellus varius in susc...</p>
      </div>
    </div>
    <!-- #intro -->
  </div>
  <!-- .container -->
</div>
<!-- #header -->

那些div的使用说明:

  • header: 定义扩展到窗口末尾的背景颜色(位于 div .container 之外)

  • 容器:使内容居中(但不是背景)

  • banner: 定义 ul#langh1

  • 的背景或边框颜色
  • intro: 与上面相同,但用于 #tagline#about(否则我必须定义 say padding 或 margin标语和关于个人)

我是否过度使用了 div?这可以简化吗?

最佳答案

看起来很完美。这应该作为一个例子!

“divitis”的一个症状是当您看到 <div>'s 的列表时而不是使用 <ul> .

关于css - 我正在遭受 "divitis"吗? (需要 CSS 专家),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2164179/

相关文章:

html - 使用 css 选择器定位 html 标签文本

php - 为什么我的 PHP 文件会出现 500 内部错误?

twitter-bootstrap - 如何使用 jumbotron font awesome 图标变得和 fa 网站上的一样大

jquery - 谁能告诉我为什么我的 html 部分被覆盖了?

JavaScript 遍历类元素并选择除单击元素之外的所有元素

javascript - 我如何在 HTML 中使用这个 JavaScript 变量?

javascript - 在 JavaScript 中创建一个弹出然后消失的 Div

javascript - 从 Javascript 重置 CSS Stars

jquery - 让div飞过屏幕

css - 如何在CSS中正确 float div和编号列表?