語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員: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年11月09日 星期四 04:40:59

語言

關於翻譯