Question

所以，我练习了HTML / CSS，并希望构建一个简单的子标题，与http://www.phppennyauctiondemo.com/上看到的完全相同（div id =“sub-header”，带有类别的部分）。

我这样做了：

<div id="sub-header">
  <div class="sub-mid">
  <ul id="nav">
    <li><a href="">All items (1)</a></li>
    <li><a href="">Shops and Coupons</a></li>
    <li><a href="">Kids toys</a></li>
    &nbsp;
  </ul>
  </div>
</div>

#sub-header
{
    background: url("/images/front_layout/header_sub_bg.gif") repeat-x;
    height: 31px;
    border-top:1px solid #708044;
    border-bottom:1px solid #d4dde1;
}

#sub-header .sub-mid
{
    width: 950px;
    margin: 0 auto;
}
#nav
{
    padding: 4px 0;
}

#nav li
{
    padding: 0 3px;
    border-right: 1px solid #B1C0C5;
    float: left;
}
#nav li a
{
    padding: 3px 8px;
    color: #607E87;
    text-shadow: 1px 1px 0 #FFFFFF;
    height:15px;
    display: block;
}

这看起来与他们的子标题完全一样（在firefox中）。

但是当我看看他们的标记和CSS时，我在实际内容之前看到了更多的div，然后我使用了更多的CSS：

<div id="sub-header" class="clearfix">

            <div  align="center">

                <div style="width:950px; text-align:left;">

                        <div id="select-categories">

        <ul id="nav">  UL after 4 divs... </ul>

由于我不是一名专业的网页开发人员，而且我认为专业人士构建了该网页 - 我的问题是为什么他们使用了那么多不做任何事情的div？

我对CSS / HTML有什么不了解吗？

Answer 1

使用那么多div是一种我们称之为'divitis'的疾病。它来自于使开发人员忘记他可以经常使用诸如ul，p等元素的疾病，因为它们用于定位和样式而无需将它们包装在div中。通常，除了可能需要重写CSS以解决这个问题之外，您可以删除这些额外的div元素而不会造成伤害。

没有找到疫苗，只有时间和经验有帮助。

Answer 2

虽然该网站可能是由专业人士设计的，但有许多技术会严重老化。

<div align="center">

例如，对齐属性已从HTML 4.01中弃用，而不是使用CSS作为样式，而不是HTML属性。

因此，请注意这样的例子。减少加价更好。提供语义含义的标记更好。使用CSS进行样式化，而不是用于样式化的HTML更好。

Answer 3

由于CSS2非常有限，我们不得不求助于使用技巧和黑客来获得某些......漂亮的东西，例如border-radius。

这可能是同样的情况。此外，在许多情况下，包装器div用于将事物组合在一起以使代码更具可读性。它们也可以用在javascript操作中，这些操作可能不会在源头弹出，因为它们在页面加载时被（主动）转换（要查看它们，请在浏览器中使用开发控制台。）

对于这个例子，它做得很糟糕，因为它使用了弃用的代码，以及一些不好的做法（html中的样式，虽然在生产环境中可以接受，因为html代码可能根据scenerio生成）

Answer 4

虽然该网站不是当前专业网站开发技术的一个很好的例子，但可能会使用许多divs spans和其他语义元素，而且从不设置样式。

很多时候，额外的标记将用于模块化。许多程序员都了解设计模式，例如Singleton或Observer模式。在HTML中，有许多结构模式，通常用于实现各种不同的效果。

例如，如果我想创建一个网站的导航区域，我可能会将其标记为：

<nav>
 <a href="foo">foo</a>
 <a href="bar">bar</a>
 <a href="baz">baz</a>
</nav>

虽然这种格式对于一种风格可能很有用，但是当客户端要求下拉菜单时，它的样式会更难。为了使其更加模块化，我通常将导航编写为：

<nav>
 <div>
  <ul>
   <li>
    <a href="foo">foo</a>
   </li>
   <li>
    <a href="bar">bar</a>
   </li>
   <li>
    <a href="baz">baz</a>
   </li>
  </ul>
 </div>
</nav>

标记现在要大得多，链接包含在无序列表中，这样设计师就可以做很多奇特的效果。可以通过向ul添加更多li来创建下拉菜单。还有一个额外的div，可用于特殊定位。如果需要多个菜单，可以在第一个之后添加额外的ul。

Answer 5

在阅读本答案之前：明白不是我的选择，而是雇主使用下面解释的方法，我不推荐下面解释的方法，也不喜欢它们，但有时我们会做我们必须做的事情： - （

我想举个例子，我最近使用VORK（PHP框架）和JavaScript在自定义应用程序上编写了一个自定义模块。我的一个规格是使用现有的CSS文件，我无法添加自己的CSS，也无法编辑现有的CSS。这并不容易。

原始设计师在CSS中指定了以下内容

ul {
     margin-top:250px;
     margin-left:50px;
     background:#F00;
}
li{ 
     margin:20px;
     padding:10px;
     display:block;
}
li.priority_high {
     background: red;
}

正如您将注意到原始设计师指定ul和li而没有任何进一步的类规范 - 顽皮的设计师，这意味着我无法使用任何列表项来处理请求的导航。为了达到这个目的，我不得不使用一系列DIV标签，一个主容器，然后为每个“级别”使用1个

<DIV id="wrapper"> 
     <DIV id="level1">home | PRODUCTS | about us | contact us</DIV>
     <DIV id="level2">product 1 : product 2 : PRODUCT 3 : product 4</DIV>
     <DIV id="level3">OVERVIEW - features - benefits - tech specs - purchase</DIV>
</DIV>

除此之外，为了满足客户的规格，我还需要将每个导航项包装在单独的DIV中，例如

<DIV id="level1">
     <DIV id="home">home</DIV><DIV id="products">PRODUCTS</DIV><DIV id="about">about us</DIV><DIV id="contact">contact us</DIV>
</DIV>

问题是该公司没有并且仍然不了解他们的应用程序使用的不良操作程度，例如我无法使用CSS文件但我可以使用style属性进行自定义样式 - stoooooopid！但你知道吗，我必须这样做。

我知道的更好，他们新的内部网页设计师知道的更好，但有时当你获得真正的好钱时，你会做你需要做的事情。

在说完所有这些内容时，我已提出重新开发应用程序以使用最佳实践的提议，因为他们使用了相当多的折旧PHP以及他们的核心应用程序存在许多安全漏洞，因此添加最佳具有更大过程的实践设计实际上可以起作用。

无论如何，我希望这个例子可以帮助你解决问题。

Answer 6

以这种方式标记过多的网站通常使用Drupal或Joomla等框架生成。

网站通常有多层元素，因为（1）模板需要用作页面各部分包装的元素，但框架也可能为每个部分生成<div> ; （2）框架将为部分中出现的每个内容块创建另一个或两个层，模块也可以添加自己的层，并且站点开发人员也可以在最终获取实际内容之前添加自己的层

通常可以省去这些层中的许多层，但这并不总是容易的。对于具有单个内容的简单部分和具有多个内容块的复杂部分，必须运行相同的代码。此外，相同的代码必须在许多不同的站点上运行，所有站点都具有截然不同的布局和设计。

标记和CSS：为什么在实际内容之前有这么多div？

6 个答案: