close
當文章中我們使用了 HTML 語法中的"列表(Lists)"時，呆板的符號總是缺乏一些可變性，如果說我們把項目符號換上一個自己畫的小圖示，那整個項目清單看來將會更活潑些!!
這裡我們是要以 CSS 來自訂項目的小圖示，所以在 HTML 中的"列表(Lists)" 語法，我們只以<li>標籤為開始，以</li>標籤為結束來說明，如下:
<li>正常列表符號</li>
<li>正常列表符號</li>
<li>正常列表符號</li>
得到的結果是這樣的:正常列表符號
正常列表符號
正常列表符號
<li>正常列表符號</li>
<li>正常列表符號</li>
得到的結果是這樣的:
接下來我們就是要將那列表前的黑點點換成小圖示，CSS語法如下:
LI {list-style: url(小圖示的圖檔路徑);}
例如: LI {list-style: url(list_icon.gif);}
例如: LI {list-style: url(list_icon.gif);}
可以看到這裡使用的CSS標籤直接為 LI，也就是全站的任何文章中，只要有使用<li>的地方，將全部換成此自訂樣式!!
將此 CSS 語法寫入您的樣式表中，得到的結果會是如下的樣子....
試試看! 讓項目清單符號也能夠有自己風格的小圖示吧!
摘自於：http://roy.nicetypo.com/contentbypermalink/152e50b669f746a948256e61004ad246
全站熱搜
留言列表
PHP (1)