close

<ol> 和 <ul> 使用的清單符號顏色只有黑色和白色這兩種顏色,CSS 2.1 中並沒有指定清單符號顏色的定義。偶們可以通過 list-style-image 來指定清單的背景圖片,這個背景圖片需要具有同清單符號相似大小,這樣它看上去就像是清單符號而非背景圖片。英文維基百科所使用之清單的背景圖片就具備如此之特殊條件。

這個就是英文維基百科所使用之清單的背景圖片:,為了同網頁背景加以區分偶給它加上了紅色的邊框,很小隻的一個圖片,5x13 像素。圖中的小正方形顏色為 #638C9C,其餘部份為 GIF 背景透明。使用其作為清單的背景圖片,偶使用以下 CSS 原始碼:

ol {
list-style-image: url(http://lh3.ggpht.com/_2TvDANS_XQI/SYllxO_NwZI/AAAAAAAABEc/LVYNnsQQoJY/s800/bullet.gif);
}


效果演示:
中國防火牆的名稱

  1. 防火長城
  2. 金盾
  3. Great Firewall
  4. GFW


下面為使用正港的黑色正方形清單符號之效果演示,使用 CSS:ol { list-style-type:square }
中國防火牆的名稱

  1. 防火長城
  2. 金盾
  3. Great Firewall
  4. GFW


偶們通過對比發現,使用背景圖片:,一改單調的黑色,絕不遜於正港的黑色正方形清單符號。

arrow
arrow
    全站熱搜

    呆丸北拜 發表在 痞客邦 留言(0) 人氣()