当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。