<分区>
我读过很多谴责过度使用 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#lang
和h1
的背景或边框颜色
intro: 与上面相同,但用于
#tagline
和#about
(否则我必须定义 say padding 或 margin标语和关于个人)
我是否过度使用了 div?这可以简化吗?