使用HTML和CSS创建面包屑导航

面包屑是一个有用的导航工具，用于显示用户在网站中的当前位置。它们为用户提供了一个清晰的路径，以便轻松返回之前访问过的页面，还可以帮助搜索引擎了解您的网站结构。

方法1

我们将创建水平面包屑导航，显示用户到达当前页面的路径。

这种类型的导航帮助用户了解自己在网站的位置以及如何返回之前的页面。

步骤

定义一个无序列表元素来容纳面包屑。
为每个面包屑添加列表项，并用锚点包裹它们以使其可点击。
使用CSS去除列表的项目符号，并移除默认的边距和内边距。
然后，使用Flexbox将列表项水平对齐。
使用margin属性在分隔符和面包屑之间添加空间。
使用color属性更改分隔符颜色。
使用color属性更改最后一个面包屑的颜色，并使用pointer-events属性禁用其链接。
使用color属性更改面包屑链接的颜色，并使用text-decoration属性去除下划线。
使用text-decoration属性在悬停时为面包屑链接添加下划线。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Breadcrumbs Example</title>
   <!-- Add styling for breadcrumbs -->
   <style>
      nav ul {
         list-style: none; /* Remove bullet points from list */
         margin: 0;
         padding: 0;
         display: flex; /* Use flexbox to align items horizontally */
      }

      nav li:not(:last-child)::after {
         content: "/"; /* Separate the breadcrumbs */
         margin: 0 10px; /* Add space between separator and breadcrumb */
         color: #999; /* Change separator color */
      }

      nav li:last-child {
         color: #333; /* Change color of last breadcrumb */
         pointer-events: none; /* Disable link for last breadcrumb */
      }

      nav a {
         color: #2196e4; /* Change color of breadcrumb links */
         text-decoration: none; /* Removes underline */
      }

      nav a:hover {
         text-decoration: underline; /* Add underline to link on hover */
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <!-- Add breadcrumb navigation -->
   <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Category</a></li>
         <li><a href="#">Subcategory</a></li>
         <li>Page Name</li>
      </ul>
   </nav>
</body>
</html>

方法2

在这里，我们将创建垂直面包屑导航，以显示到达当前页面的路径。

步骤

定义一个 nav 元素来容纳面包屑链接。
使用 ul 标签创建一个无序列表。
使用 li 标签为每个面包屑链接创建一个列表项。
如果面包屑链接可以点击，使用 anchor 标签。
如果面包屑链接无法点击，则使用 li 标签内的普通文本。
使用 CSS 样式来自定义面包屑链接的外观，包括颜色、文本装饰和任何其他所需的样式。
使用值为 flex 的 display 属性来垂直对齐面包屑链接，并使用值为 column 的 flex-direction 属性来垂直堆叠它们。
可选地，使用 align-items 将链接对齐到 nav 元素的左侧或右侧。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Vertical Breadcrumb Navigation Example</title>
   <style>
      /* Style the nav container */
      nav {
         display: flex;
         flex-direction: column; /* Align the links vertically */
         align-items: flex-start; /* Align the links to the left */
      }

      /* Style the unordered list */
      nav ul {
         list-style: none; /* Remove bullet points */
         margin: 0;
         padding: 0;
      }

      /* Add separator between breadcrumb links */
      nav li:not(:last-child)::after {
         content: ">"; /* Add “>” as separator */
         margin: 0 10px; /* Add some margin for spacing */
         color: #999; /* Use a light gray color */
      }

      /* Style the last breadcrumb link */
      nav li:last-child {
         color: #333; /* Use a dark gray color */
         pointer-events: none; /* Disable link behavior */
      }

      /* Style the breadcrumb links */
      nav a {
         color: #2196e4; /* Use a blue color */
         text-decoration: none; /* Remove underline */
      }

      /* Style the breadcrumb links on hover */
      nav a:hover {
         text-decoration: underline; /* Add underline on hover */
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Category</a></li>
         <li><a href="#">Subcategory</a></li>
         <li>Page Name</li>
      </ul>
   </nav>
</body>
</html>