<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>
<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>
<div id="wrap"><!--contents with fixed width:: 950px--></div>
<div id="wrap"><!--contents with fixed width:: 950px--></div>
<div id="full-width"><!--contents with full width:: 100%--></div>
关键问题
这工作正常,但许多程序员或说css规则指示我们不应该使用相同的id超过一次.那么我怎么能放置我的标记？并且有人可以描述我们应该只使用1个不超过这个不能工作的id吗？
像我之前所说的其他人一样,您使用的id标签是唯一标识符.而您应该使用a class来跨多个元素应用样式.
了解W3C定义的内容id:(http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)
元素标识符:id和class属性
属性定义
id = name [CS]此属性为元素指定名称.该名称在文档中必须是唯一的.
class = cdata-list [CS]此属性为元素分配类名或类名集.可以为任意数量的元素分配相同的类名或名称.多个类名必须用空格字符分隔.
更有趣的是,您声明您的示例有效,并且在大多数浏览器中都有效.这并不能使它成为有效甚至是好的HTML/CSS只是某些浏览器会发现开发人员的缺点,并且会将符合标准的非标准代码视为符合标准.
这是一个永远不会起作用的例子.您可能知道id标签可用于命名锚点.例如
<a href="#content">Jump to content</a>
<div id="content">
some content
</div>
<div id="content">
some other content
</div>
在这个例子中,命名锚链接到哪个元素？在大多数情况下,我认为它会转到第一个元素.然而,这可能不是开发人员想要的.
该id元素比仅仅将元素应用于元素有更多的用途,W3C继续说明:
id属性在HTML中有几个角色:
- 作为样式表选择器.
- 作为超文本链接的目标锚点.
- 作为从脚本引用特定元素的方法.
- 作为声明的OBJECT元素的名称.
- 用于通过用户代理进行处理(例如,用于在将HTML页面中的数据提取到数据库中时识别字段,将HTML文档翻译成其他格式等).
- 另一方面,class属性为一个元素分配一个或多个类名; 该元素可以说属于这些类.类名可以由多个元素实例共享.
class属性在HTML中有几个角色:
- 作为样式表选择器(当作者希望将样式信息分配给一组元素时).
- 用于通用用户代理处理.
您应该编写符合标准的代码,以便了解它在符合标准的浏览器中的功能.结果在更广泛的浏览器中更具可预测性和稳定性,并且更有可能在未来版本中运行.
编辑:回应OP的评论:
CSS:
.content {
width: 950px;
margin: auto; // Assuming you want to centre this
}
无论你应用什么类.content,宽度为950px.您不需要在#top元素上设置100%宽度,因为它是块级div并且自然地扩展到100%宽度.
HTML:
<div id="top">
<div id="navigation" class="content">
</div>
</div>
<div id="main" class="content">
</div>
<div id="footer" class="content">
</div>