语言

这是一份翻译。 与 英文版本 相比,它可能包含错误或者过时。 翻译员:Samuel Chong of Chinese Translation Services through its pro bono translation services

网页样式表 CSS 提示与窍门

请见 索引 去查看所有提示.

在这一页:

一个固定住的菜单

您在这网页右边看到的菜单只是一个UL列表 但当你滚动页面时它仍保持固定。 (您可能需要先将窗口缩小才能获得滚动条。) 使它固定在其位置的程序包含在样式表的规则/程序之中。 以下是直接从本网页的源程序中提取的编码:

<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

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

#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

这里有趣的规则或程序是: 'position: fixed', 使DIV在屏幕上固定。 'top: 50%' 和 'right: 0' 确认DIV在哪里显示, 在这种情况: 从窗口顶部向下50%,从右边开始一个常量0px。 其他属性,边距,边框, 颜色等,可根据个人喜好添加。

还有"left"和"bottom"属性,将元素锚定在屏幕的左侧或底部。

更多细节

更确切地说: 一旦元素被固定为 'position: fixed, 三个属性"left","width"和 "right"会一起确定相对于窗口的水平位置和大小。 (CSS使用更通用的词 viewport; 窗口是视口的示例。)

你最多需要三个属性中的两个,即左和宽度,右和宽度,或左和对。 只设置三个中的一个,或者根本不设置都是可行的。 在这种情况下,CSS将根据需要使用元素的自然 ("内在")大小和/或位置,以保留其默认值('auto')的任何属性。

这同样适用于三重奏"top","height"和"bottom"。 你最多需要设置两个: 如果要控制从窗口顶部的距离就使用'top',"bottom"来控制 距离底部和'height'如果你想指定一个固定的高度的话。

如果你看看嵌入在这个页面的实际样式表, 您将看到一些看起来彼此矛盾的附加规则。 这些都是为了防止bug在一些旧的浏览器。 请见下面.

常见问题: 在Windows上的 IE 5 & 6 ?

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

很不幸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 [page at archive.org]). 首先以 'position: absolute' 取代样式规则中的 'position: fixed', 然后在样式规则中靠后一点的位置加入以下规则:

*>#intro {position: fixed}

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

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

Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

创建于2001年1月17日;
最后更新 2017年04月18日 星期二 14时01分25秒

语言

关于翻译