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

📅  最后修改于: 2021-08-31 06:45:09             🧑  作者: Mango

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

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

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

    • HTML代码:
      
      
        
      
          Creating Breadcrumbs
        
      
        
      
          

      GeeksforGeeks

          Creating Breadcrumbs        

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

    • CSS 代码:
      
      

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

    
    
      
    
        Creating Breadcrumbs
        
    
      
    
        

    GeeksforGeeks

        Creating Breadcrumbs        

    输出: