网页样式表
CSS的提示与窍门

一个固定住的菜单

你所看到的这一网页右上角的菜单仅是一个含有一些A元素的DIV。使它固定在其位置的程序包含在样式表的规则/程序之中。以下是直接从本网页的源程序中提取的编码：

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

在一个没有CSS功能或CSS功能被关掉的浏览器中，这只是一个含有链接的普通段落。但感谢以下的规则/程序，它看起来将是被钉在浏览器窗口的右上角，“漂浮”在网页之上。

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}
 
div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }
 
div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

这里有趣的规则/程序是：'position: fixed' 使DIV在屏幕上保持固定，'display: block' 使在DIV中的A元素成为组元素，因此能有层次的显示，而不是都在一条线上显示。

小心最后三个规则/程序的顺序。它们都具有相同的特异性，所以最后的规则/程序决定颜色。如果鼠标徘徊在链接上，我们希望应用:hover，所以这一规则/程序必须在最后。

其它规则/程序如边缘，边界，颜色等可根据个人喜好而删除或更改。但请注意我们在链接之间运用规则/程序的方法：因为 ':first-child' 这一规则/程序，在除了第一个链接之外的所有链接上都有边界。 像这样的一组规则/程序（所有元素上加边界和第一个元素上无边界）对在元素之间加入边界非常方便。

（如果你看从这一网页所链接的样式表，banner-k.css 和 banner.css, 你将看到一些貌似相互矛盾的规则/程序。它们是用来防止几种老的浏览器可能碰到的错误。 特别是banner-o.css 使标题条隐藏起来，而banner.css 使标题条以块状形式出现。这可以使标题条在Netscape 4中隐藏起来，因为它忽略了banner.css 的 @import)

常见问题：在Windows 上的IE5和6？

如果你用微软IE5 或6的浏览器阅读此页("WinIE5" 和 "WinIE6") ，你会注意到它不好用。至少现在到2002年九月的版本是这样的。很多人就此向我询问，所以我想借此提供一点解释。简单的说，错误是在浏览器，而不在网页本身。

很不幸WinIE5 和 WinIE6还不能识别 'fixed'，而更大的问题是它们不能正确解析 'position' 这一属性。一个不识别 'fixed' 属性的浏览器本应忽略 'position: fixed' 这一规则/程序，回到样式表中之前所定义的 'position' 值。然后我们可以在 'fixed' 之前加入 'position: absolute'，浏览器应该使用'position: absolute'。 但在WinIE 5 和 6 中并非如此。很明显，不知怎么关键词'fixed' 被解释成 'static'.

你无法让WinIE5 和 WinIE6支持 'fixed', 但有一个针对解析问题的变通办法。Johannes Koch 提醒了我这一秘诀(从他的 collection of work-arounds). 首先以 'position: absolute' 取代样式规则中的 'position: fixed'，然后在样式规则中靠后一点的位置加入

body>div.banner {position: fixed}

（如果DIV标题条是在BODY以外的元素中，以那一元素取代BODY。）这样做的效果是能识别CSS '>' (child) 部分的浏览器将使用这一规则，但那些不能识别的浏览器，特别是WinIE5 和 WinIE6, 将忽略它。'position: absolute' 规则将被使用，并且菜单将在正确的位置，只是在你滚动鼠标时它无法保持固定。

在 '>' 前后没有空格是很重要的 。