我读了很多文章,谴责过度使用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(../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的说明:
header:定义扩展的背景颜色,直到窗口结束(位于div .container之外)。
container:居中内容(而不是背景)。
banner:定义ul#lang和h1周围的背景或边框颜色。
intro:同上,但#tagline和#about(否则我必须定义说padding或边界为tagline和单独)。
我过度使用div?
这可以简化吗?
解决方法
它看起来完美。这应该作为一个例子!
“divitis”的一个症状是当您看到< div>的列表而不是使用< ul> ;.