带计数器的入门 CSS 框标题

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Primer CSS Box用于在简单的圆角框中显示内容。 Primer CSS Box Headers with Counters用于使用Counter类创建带有计数器的框头。我们将使用Counter-gray使背景颜色变灰，文本颜色变暗。在本文中，我们将讨论 Primer CSS Box Headers with Counters。

带计数器类的入门 CSS 框标题：

• Box-header：该类用于创建 Box 头。
• Box-title：该类用于创建表头标题。
• Counter：此类用于创建带有标题的计数器。
• Counter–gray：该类用于将计数器背景颜色更改为灰色，将文本颜色更改为深色。

句法：

  

    

      ...
       
          ... 
      
    
  

示例 1：以下代码演示了带计数器的 Primer CSS 框标题。

HTML

  

    
    

  

    

      
 GeeksforGeeks 
      
 Primer CSS Box Headers with Counters 
    
 
 

  
    

        

            

              GeeksforGeeks
              5
            
        
    

  

输出：

带计数器的入门 CSS 框标题

示例 2：以下代码演示了带计数器的 Primer CSS 框标题。

HTML

  

    
    

  

    

        
 GeeksforGeeks 
        
 Primer CSS Box Headers with Counters 
    
 
 

  
    

        

            

                GeeksforGeeks
                42
            
        
        

            
        
    

  

输出：

带计数器的入门 CSS 框标题

参考： https://primer.style/css/components/box#box-headers-with-counters