CSS list-style-image 列表開頭顯示圖示

CSS list-style-image 列表開頭顯示圖示是 CSS 對於項目符號如 ul li 或 ol li 項目清單的美化功能之一，預設的 HTML ul li 或 ol li 標籤前方的圖示不是黑色圓點就是數字，CSS 允許網頁設計師利用 list-style-image 來替代掉原本的符號圖示，改用漂亮的小圖案（圖片），這樣的優點是可以迅速提升視覺效果，讓文章看起來更有質感。

CSS list-style-image 基本語法
list-style-image:url('要顯示的項目符號圖片網址');
CSS 的 list-style-image 屬性可以使用的參數有 none、inherit 以及 url，其中 none 的意思是＂沒有圖示＂，也就是預設值，而 inherit 是繼承自父層的設定，不過少部份的瀏覽器不支援，所以不建議使用 inherit 這個參數，最後的 url 就是我們要介紹的，真正實用的是這個參數，url 內就是接＂要顯示的圖片網址＂，我們會在範例中呈現給各位讀者朋友看。

CSS list-style-image 實際應用範例
<ul style="list-style-image:none;">
　<li>前方為預設圖案，黑色圓點</li>
　<li>前方為預設圖案，黑色圓點</li>
</ul>
<ol style="list-style-image:none;">
　<li>前方為預設值，數字</li>
　<li>前方為預設值，數字</li>
</ol>
<ul style="list-style-image:url('upload/20150909194640.png');">
　<li>前方為替代圖片</li>
　<li>前方為替代圖片</li>
</ul>
<ol style="list-style-image:url('upload/20150909194640.png');">
　<li>前方為替代圖片</li>
　<li>前方為替代圖片</li>
</ol>
範例的視覺效果
  • 前方為預設圖案，黑色圓點
  • 前方為預設圖案，黑色圓點
  1. 前方為預設值，數字
  2. 前方為預設值，數字
  • 前方為替代圖片
  • 前方為替代圖片
  1. 前方為替代圖片
  2. 前方為替代圖片
我們在犯力中分別準備了 HTML 的 ul li 項目清單與 ol li 項目清單，第一組都是使用預設值，所以項目清單前方的符號分別為黑色圓點以及數字，第二組開始是用 CSS list-style-image 修改的前方顯示的符號為圖片，各位應該可以很清楚的看到，無論是 ul li 清單還是 ol li 清單，前方的顯示符號經過修改後都是一樣的小圖案，這就是 CSS list-style-image 的實際效果。

更多項目清單美化設計
© Copyright webtech.tw Since 2010