WEBTECH 網頁設計教學站
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 的實際效果。

更多項目清單美化設計

連絡我們