up
down
Close
線上訪客: 6 本日人次: 1756 昨日人次: 1615 累積人次: 976532
 

HTML ol 與 ul 列表清單與嵌套子項目方法

│ 4618 Views │ HTML
HTML ol 與 ul 列表清單與嵌套子項目方法
HTML ol 與 ul 列表清單與嵌套子項目方法
  1. 有序列表
  2. ul 無序列表
  3. 如何變更編號類型
  4. 如何包子條目(嵌套列表)

在做目錄、目次等列表清單的時候如果是手動一行一行標上編碼,不僅耗時,且不利於瀏覽器解析清單,並且最重要的是,當你需要在某一行插入新的行列時,會需要重新變更所有的編碼,因此較好的做法是利用 HTML 既有的列表清單:<ol><ul>,而它們有何差異?又該如何使用?以下來看看說明。

ol 有序列表

<ol>是有序列表,也就是會自動編上編號,不需要手動加上數字,而根據不同的需求,可以有不同的編號方式,如 1、2、3 或一、二、三等。每一行都用<li>包夾,它代表的是列表中的條目。


<ol>
<li>這是第一條目。</li>
<li>這是第二條目。</li>
</li>
</ol>

呈現結果:

  1. 這是第一條目。
  2. 這是第二條目。

ul 無序列表

<ul>是無序列表,也就是以圓點或其他符號來標示,條目彼此之間沒有順序關係,而根據不同的需求,可以有不同的符號,如實心方塊、空心圓點等。每一行一樣是用<li>包夾,它代表的是列表中的條目。


<ul>
<li>這是第一條目。</li>
<li>這是第二條目。</li>
</li>
</ul>

呈現結果:

  • 這是第一條目。
  • 這是第二條目。

如何變更編號類型

可以利用 CSS 變更編號類型,CSS 屬性為list-style,值有很多種,比方說想要呈現中文的一、二、三形式,其值為cjk-ideographic


<ol style="list-style:cjk-ideographic">
<li>這是第一條目。</li>
<li>這是第二條目。</li>
</li>
</ol>

呈現結果:

  1. 這是第一條目。
  2. 這是第二條目。

如何包子條目(嵌套列表)

只要在li中再做一次olul清單列表即可,另外,他們是可以交叉使用的,例如ol中可以包ulul中也可以包ol


<ol>
 <li>這是第1條目。</li>
 <li>這是第2條目。
  <ol>
   <li>這是第2條目中的第1條目</li>
   <li>這是第2條目中的第2條目</li>
   </li>
  </ol>
 </li>
 <li>這是第3條目。</li>
</ol>
  1. 這是第1條目。
  2. 這是第2條目。
    1. 這是第2條目中的第1條目
    2. 這是第2條目中的第2條目
  3. 這是第3條目。
本文是否對您有幫助?

延伸閱讀