如何使用 HTML 和 CSS 创建面包屑？

对于非 CSS 专家来说，创建一个有吸引力的Breadcrumbs 导航是相当困难的。如果不使用 CSS，面包屑导航将窃取您网站的华丽。通过只使用 HTML 和 CSS，我们可以创建一个有吸引力的面包屑导航。在本文中，主要焦点将是 CSS。我们将首先为面包屑创建结构，然后我们将根据需要设计结构。

创建结构：这里我们将使用

标签创建一个普通结构。这将创建一个简单的界面，您可以通过运行以下代码来检查它：

• HTML代码：

  
  
    
  
      
    
  
    
  
      
  GeeksforGeeks
      Creating Breadcrumbs
      
  
          
  
              Web Technologies
          
          
  
              HTML
          
          
  
              Tags
          
          
  
              Attributes
          
      
  
    
  
  

Designing Structure：这里最困难的任务是在Breadcrumbs的右侧创建箭头形。要创建箭头形状，我们将使用::after 选择器。使用 z-index 属性将一个列表放在另一个列表上。其他事情对于 CSS 开发人员来说很容易。

• CSS 代码：

最终解决方案：在本节中，我们将结合 HTML 和 CSS 代码来创建面包屑。

  

    
    

  

    
GeeksforGeeks
    Creating Breadcrumbs
    

        

            Web Technologies
        
        

            HTML
        
        

            Tags
        
        

            Attributes
        
    

  

输出：