WEBTECH 網頁設計教學站
CSS list-style-type 列表開頭顯示符號
CSS list-style-type 的功能是用來設計項目清單列表開頭顯示符號,傳統的項目清單(HTML ul li 或 HTML ol li)的開頭預設符號不是實心的黑點就是數字,可是單純這兩種也許無法滿足所有的網頁內容,所以 CSS 允許網頁設計師利用 list-style-type 來調整這些項目清單前面的顯示符號,可以使用的包含有實心圓形、空心圓形、實心正方形、英文字母大寫或小寫、阿拉伯數字、前方自動補零的阿拉伯數字、羅馬數字的大寫或小寫 ... 等,list-style-type 允許的顯示符號相當多種,可以滿足更多的網頁內容。

CSS list-style-type 屬性語法
list-style-type: 顯示符號參數;
顯示符號參數就是要在項目符號前面顯示的符號,每一種符號有特定的參數,可以設定的參數如下表。

CSS list-style-type 允許的符號參數
參數
定義
none
不顯示
disc
實心的圓形
circle
空心的圓形
square
實心的正方形
lower-alpha
英文字母小寫
upper-alpha
英文字母大寫
decimal阿拉伯數字
decimal-leading-zero十進位制的阿拉伯數字,前方會自動補零。
armenian
亞美尼亞語
lower-greek
希臘語
lower-roman
小寫羅馬數字
upper-roman
大寫羅馬數字

上表參考自 WibibiCSS list-style-type 內容。

CSS list-style-type 的實際操作範例
<ul style="list-style-type:circle;">
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
</ul>
<ol style="list-style-type:circle;">
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
<li>前方顯示空心圓形</li>
</ol>
<ul style="list-style-type:lower-alpha;">
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
</ul>
<ol style="list-style-type:lower-alpha;">
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
<li>前方顯示英文字母小寫</li>
</ol>
<ul style="list-style-type:lower-roman;">
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
</ul>
<ol style="list-style-type:lower-roman;">
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
<li>前方顯示小寫羅馬數字</li>
</ol>
範例顯示結果
  • 前方顯示空心圓形
  • 前方顯示空心圓形
  • 前方顯示空心圓形
  1. 前方顯示空心圓形
  2. 前方顯示空心圓形
  3. 前方顯示空心圓形
  • 前方顯示英文字母小寫
  • 前方顯示英文字母小寫
  • 前方顯示英文字母小寫
  1. 前方顯示英文字母小寫
  2. 前方顯示英文字母小寫
  3. 前方顯示英文字母小寫
  • 前方顯示小寫羅馬數字
  • 前方顯示小寫羅馬數字
  • 前方顯示小寫羅馬數字
  1. 前方顯示小寫羅馬數字
  2. 前方顯示小寫羅馬數字
  3. 前方顯示小寫羅馬數字
我們在範例中用了 CSS list-style-type 的各種屬性重新設計了 HTML ul li 與 HTML ol li 項目符號前面的顯示符號,無論是 ul li 還是 ol li 都同樣可以修改,你也可以自己嘗試用 CSS list-style-type 其它不同的參數看看實際效果。

如果你想更進一步將顯示符號改為圖片,請參閱:CSS list-style-image 列表開頭顯示圖示

更多項目符號設計

連絡我們