當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

CSS list-style-type用法及代碼示例


如果“ list-style-image”的值為“ none”，則CSS中的list-style-type屬性指定列表項標記的外觀(例如光盤，字符或自定義計數器樣式)。

用法:

list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|
lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none|
inherit;

屬性值：


  • disc:這是默認值。標記為實心圓。
    用法： 
    list-style-type:disc;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:disc; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:disc; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    disc

  • circle:標記是空心圓。
    用法： 
    list-style-type:circle;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:circle; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:circle; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    circle

  • square:標記是一個正方形。
    用法： 
    list-style-type:square;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:square; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:square; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    square

  • decimal:標記是十​​進製數字，從1開始。
    用法： 
    list-style-type:decimal;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:decimal; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:decimal; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    decimal

  • lower-roman：標記是小寫的羅馬數字(i，ii，iii，iv，v等)。

    用法:

    list-style-type:lower-roman;

    例：


    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:lower-roman; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:lower-roman; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    lower-roman

  • upper-roman：標記是大寫的羅馬數字(I，II，III，IV，V等)。

    用法:

    list-style-type:upper-roman;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:upper-roman; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:upper-roman; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    upper-roman

  • lower-greek：標記是小寫的古典希臘字母alpha，beta，gamma，…(？，？，？，…)。

    用法:

    list-style-type:lower-greek;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:lower-greek; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:lower-greek; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    lower-greek

  • lower-latin：標記是小寫的ASCII字母(a，b，c，…z)。

    用法:

    list-style-type:lower-latin;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:lower-latin; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:lower-latin; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    lower-latin

  • upper-latin：標記是大寫的ASCII字母(A，B，C，... Z)。

    用法:

    list-style-type:upper-latin;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:upper-latin; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:upper-latin; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    upper-latin

  • none:在此模式下沒有顯示標記。
    用法： 
    list-style-type:none;

    例：

    <!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS list-style-type Property</title> 
        <style> 
        .geek1 { 
          list-style-type:none; 
        } 
        </style> 
    </head> 
    <body> 
    <h1 style = "text-align:center; color:green"> 
        list-style-type:none; 
    </h1> 
    <p>Sorting Algorithms</p> 
    <ul class="geek1"> 
      <li>Bubble Sort </li> 
      <li>Merge Sort</li> 
      <li>Insertion Sort</li> 
    </ul> 
      
    </body> 
</html>

    輸出：
    none

注意：lower-alpha和upper-alpha分別與lower-latin和upper-latin相同。支持的瀏覽器：下麵列出了list-style-type屬性支持的瀏覽器：

  • 穀歌瀏覽器1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 7.0
  • 蘋果Safari 1.0


相關用法


注：本文由純淨天空篩選整理自Vishal Chaudhary 2大神的英文原創作品 CSS | list-style-type Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。