📌  相关文章
📜  如何使用创建项目符号<li>元素？

📅  最后修改于: 2021-09-02 05:00:24             🧑  作者: Mango

我们知道，无论是有序列表还是无序列表，它们都带有编号。

它可能是：

  • 子弹
  • 正方形
  • 十进制
  • 罗曼等。

我们可以使用许多选项，但问题是这取决于什么属性?

在 CSS 中，对于像

    和
      这样的标签，有一个名为list-style-type 的属性。

      方法： list-style-type属性决定了项目符号、正方形或小数等是否带有 li 元素。要更改或了解它对 HTML 的影响，可以使用针对选择器

        或
          的 CSS。

          语法：针对

        1. 元素的 CSS： 

          ol {
    list-style-type: decimal
}
ul {
    list-style-type: disc
}

          让我们通过例子来理解：

          1. 有序列表的默认列表样式类型是十进制，无序是光盘。从上面的代码可以看出。
            • 例子： 
              


  
  
  Lists


  
              Ordered List:
              
  
                
      
              1. Eggs
                2. 
      
              2. Bacon
                3. 
      
              3. Leeks
                4. 
  
              
  
              Unordered List:
              
  
                
      
              • Coriander
                • 
      
              • Basil
                • 
      
              • Onion
                • 
  
            • 输出：

              在默认样式中，

                标签带有 Decimal，
                  带有 Disc/Bullets，如上面 CSS 中定义的那样。

                  从这里我们了解子弹是如何进入

                • 元素的，但我们也可以将它们更改为其他内容。

              1. 现在我们知道项目符号在列表元素中的位置，我们可以相应地更改它。让我们将其设置为有序列表中的罗马数字和无序列表中的方格。
                • 例子： 
                  


  
  
  Lists
  
  

  

  
                  Ordered List:
                  
  
                    
      
                  1. Eggs
                    2. 
      
                  2. Bacon
                    3. 
      
                  3. Leeks
                    4. 
  
                  
  
                  Unordered List:
                  
  
                    
      
                  • Coriander
                    • 
      
                  • Basil
                    • 
      
                  • Onion
                    • 
  
                • 输出：
                  罗马数字和平方分别在有序和无序列表中。

                  在这里我们可以清楚地看到子弹/圆盘被正方形和小数替换为罗马数字。

              完整代码： 

              


  
  
  Lists

  

  
              Ordered List:
              
  
                
      
              1. Eggs
                2. 
      
              2. Bacon
                3. 
      
              3. Leeks
                4. 
  
              
  
              Unordered List:
              
  
                
      
              • Coriander
                • 
      
              • Basil
                • 
      
              • Onion
                • 
  
              
  
              Ordered List:
              
  
                
    
              1. Eggs
                2. 
    
              2. Bacon
                3. 
    
              3. Leeks
                4. 
  
              
  
              Unordered List:
              
  
                
    
              • Coriander
                • 
    
              • Basil
                • 
    
              • Onion
                • 
  
              

                    

              输出：

              使用默认和自定义内联 CSS

              使用默认和自定义内联 CSS

              同样，我们可以将 list-style-type 更改为多种类型：

              1. 上阿尔法
              2. 低阿尔法
              3. 没有任何
              4. 圆圈

                还有很多…。