入门 CSS 警报 Flash 横幅

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

在本文中，我们将了解 Primer CSS Alerts Flash Banner。 Primer CSS Alerts Flash Banner 用于闪烁固定在页面顶部的消息。

句法：

示例 1：在此示例中，我们将简单地放置一个 Flash 横幅。您会注意到使用flash和flash-banner类将 flash 横幅放置在顶部。

HTML

  

    

  

    

        Flash banner message.
    
    
        
        

              GeeksforGeeks
          
        
 Alert Flash Banner
    

    

输出：

示例 2：在此示例中，我们将应用一个按钮来获取 Flash 横幅。

HTML

  

    
      
    
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    

  

    
        Flash banner message.
    
  
    
        
            GeeksforGeeks
        
          
         Alert Flash Banner
          
        
            Click me
        
        
    
  
    
        function getAlert() {
            document.getElementById("GFG")
                .style.display = 'block';
        }
    

  

输出：

参考： https://primer.style/css/components/alerts#flash-banner