我是否患有“阴道炎”？ （CSS专家需要）
我读过很多谴责过度使用div的文章。 我有一种感觉，我可能会这样做，在下面的标记：
HTML：
<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 --> CSS：
.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(..http://img.dovov.comlogo.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的解释：
标题：定义在窗口结束之前展开的背景颜色（位于div .container ）。
容器：以内容为中心（但不包括背景）。
横幅：定义ul#lang和h1周围的背景或边框颜色。
介绍：与上面相同，但#tagline和#about （否则我必须定义说填充或标语边缘和个别）。
我过度使用div吗？
这可以简化吗？
它看起来很完美。 这应该被视为一个例子！
“divitis”的一个症状是当你看到<div>'s的列表而不是使用<ul> 。
大部分你的标记是好的。 每个网站都有一些不同的问题。 我认为你可以通过删除#intro并将CSS应用于两列来改善代码。
根据您网页的其余部分，您可能可以不使用#header div。
此外，如果需要帮助多个背景/容器，则可以devisehtml和body样式。 请记住，只要开始将样式应用于html ， body就开始像div （不会扩展到浏览器的底部）。
使用divs或新的HTML 5块元素，首先是关于语义意义，并给予地方挂钩你的CSS第二。
因为你的每个div元素都有特定的用途，他们提供了元素的语义分组，所以我会说你的代码是好的。
为了logging，这是divitis：
<div class='image'> <div class='shadow'> <div class='bottom-shadow'> <img src="..." alt="" /> </div> </div> <div class="clear"></div> </div>
您正在使用<ul> s进行导航，标题使用<h1><h2> – 这对我来说已经足够了。 我想不出任何你正在使用的div的更合适的元素。 将通过我的质量检查没有进一步的废话。
你需要的时候使用<p> ， <h*>所以它是正确的。
什么是坏的是使用div而不是一个适当的元素。 这里没有这样的事情。
每个人在这个问题上可能会有不同的意见，但是我的意见是：
你没有使用<div> 。
如果您在使用<h2> ， <p>等时使用<div> ，那么您肯定会做错。 换句话说，如果你弯曲<div>以适应你的每一个目的，你就有一个问题。
不幸的是，当CSS开始stream行起来的时候，有很多文章都是用“使用<div>而不是<tagX> ！”来标题/主题的。 模式。
这是很好的标记。 良好的语义使用所有元素。 和美丽的使用评论。 （是的，我看到这个问题已经被回答了，表决正确了，但是我是新的，并且要找点意见，如果我是第一个来的话，那么wammo！）
您现在可以开始使用新的HTML 5元素，并带有一些JS技巧。
然后你得到真正有用的页眉，页脚，文章，旁边和菜单元素。
将CSS3的样式与圆angular，阴影结合起来… divitis可能有一个治疗方法，但我们将不得不等待得到全力支持。
根本没有被滥用。 它是干净的，只有2个div直接与样式相关的语义代码（不知道你的.container div是否有样式 – 我会这么猜测，并且你在其他地方使用它们，因为它是一个类）。 语义代码 – 这就是重要的！ 我觉得你做得很好。
立即想到一个变化：
如果这些都是你所有的风格，那就把.container div。 由于它没有风格，所以是多余的。
我尝试了FF3.5和IE8中的代码。 为“标题”div定义的背景颜色，在FF3.5中，整个标题div具有该颜色。 但在IE8中，背景颜色只显示横幅和头部h2 intro div。
所以问题是应该背景颜色适用于整个标题格或是只是为了一个特定的部分？
而对于容器div，属性类的值为“container”。 这个类没有在CSS中定义。
我build议不要在css规则声明中使用id。 事实上，我赞成不使用ID的，这是不值得的。 类工作得很好，特异性较低。
我过度使用div吗？
取决于你的需求，但恕我直言，没有。
这可以简化吗？
也许用表格，但是在多个浏览器上使用表格时，表格通常是僵化的，毫不在意的。
