CSS教學:編號清單、項目符號列表的自訂風格、數字表示方式(以WordPress為例)

無論是做簡報或是撰寫報告時,為了清楚呈現出想要表達的內容,我們有時候會透過條列式的編排方式進行呈現。如果是應用在網頁內容,我們會透過「編號清單」或是「項目符號列表」的技術來編排這些條列式內容。

不過在設計網站內容的階段,由於需要透過 HTML 語法來撰寫,編排設計的自由度便受限於工具開發者所推出的有限功能,無法像在微軟文書處理工具 Office 或簡報軟體 Keynotes 等來得方便。不過實際上要是能夠深入了解 HTML 語法內容,實際能夠呈現出來的效果也可以達到讓人滿地的成果,有時候甚至比起來得固定式的電腦軟體來得更加自由,就是語法撰寫上比較麻煩些。

備註:我在兩個網站測試下面的錯誤狀況,其中一個網站可以正確變更為數字,但是另一個沒辦法,因此我無法肯定你一定會遇到同樣問題。總之,就算我們採用了正確的 HTML 語法與參數,也很可能因為外觀佈景(Theme)或是瀏覽器支援度等影響而改變呈現效果,關於這一點也只能自己多加測試,因此本文重點還是擺在文末的編號語法列表,供大家參考使用。

例如在 WordPress 中,如果要列出三種表列內容,會出現如下效果:

  1. 內容一
  2. 內容二
  3. 內容三

語法如下:

<ol>
<li>內容一</li>
<li>內容二</li>
<li>內容三</li>
</ol>

要是我想在 1 中塞入兩條子項(使用「增加縮排」按鈕,或鍵盤上的「tab」按鍵),會變成:

  1. 內容一
    1. 子項一
    2. 子項二
  2. 內容二
  3. 內容三

語法如下:

<ol>
<li>內容一
<ol>
<li>子項一</li>
<li>子項二</li>
</ol>
</li>
<li>內容二</li>
<li>內容三</li>
</ol>

接著我想用其他符號(例如小寫英文字母或小寫希臘字母),可以在編號清單的按鈕下拉清單中直接改選,效果如下:

  1. 內容一
    1. 子項一
    2. 子項二
  2. 內容二
  3. 內容三

語法如下:

<ol>
<li>內容一
<ol style="list-style-type: lower-alpha;">
<li>子項一</li>
<li>子項二</li>
</ol>
</li>
<li>內容二</li>
<li>內容三</li>
</ol>

不過在 WordPress 的設計中有一個瑕疵,如果主要編號不是數字,那麼子項(有可能)沒辦法再選用預設數字,情況如下:

  1. 內容一
    1. 子項一
    2. 子項二
  2. 內容二
  3. 內容三

語法如下:

<ol style="list-style-type: upper-alpha;">
<li>內容一
<ol style="list-style-type: upper-alpha;">
<li>子項一</li>
<li>子項二</li>
</ol>
</li>
<li>內容二</li>
<li>內容三</li>
</ol>

這時候我們可以透過手動變更 HTML 語法(文字),將子項的編號改回數字,語法如下:

<ol style="list-style-type:decimal;">

其他編號清單、項目符號列表的可用參數列於下面,提供大家做為參考,也可以在編輯器不支援的情況下,親手挑選想用的符號,包括:

  • •••:disc(預設;原點)。
  • ○○○:circle(圓圈)。
  • ▪▪▪:square(方塊)。
  • 1、2、3:decimal(預設;數字)。
  • 01、02、03:decimal-leading-zero(小數開頭的數字)。
  • i、ii、iii:lower-roman(小寫羅馬數字)。
  • I、II、III:upper-roman(大寫羅馬數字)。
  • α、β、γ:lower-greek(小寫希臘字母)。
  • a、b、c:lower-latin(小寫拉丁文字母)。
  • A、B、C:upper-latin(大寫拉丁文字母)。
  • Ա、Բ、Գ:armenian(亞美尼亞字母)。
  • ა、ბ、გ:georgian(格魯吉亞字母)。
  • a、b、c:lower-alpha(小寫英文字母)。
  • A、B、C:upper-alpha(大寫英文字母)。

工具人

做你的外套 擁抱著卻不被擁抱 聽到你對他的撒嬌 可笑的是我沒資格計較(誤)!工具人是科技人,不是愛的僕人喔(是在傲嬌什麼)。

You may also like...

說些什麼吧

%d bloggers like this: