基础 CSS 面包屑(1)

📌 相关文章

📜 基础 CSS 面包屑(1)

📅 最后修改于: 2023-12-03 15:37:49.597000 🧑 作者: Mango

基础 CSS 面包屑

面包屑是一个网站的重要的导航元素，它可以帮助用户更好地理解他们所浏览的网站的结构。在这篇文章中，我们将介绍如何使用基础 CSS 创建面包屑。

HTML 结构

面包屑可以用 <ul> 和 <li> 构建，如下所示：

<ul class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li><a href="#">产品</a></li>
  <li class="active">面包屑</li>
</ul>

请注意，这个结构必须包含一个 class 属性为 breadcrumb 的 <ul> 元素，以及一个 class 属性为 active 的最后一个 <li> 元素，以指示当前页面。

CSS 样式

接下来，我们需要编写一些基础的 CSS 样式，用于设置面包屑的外观和间距。

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.breadcrumb li {
  display: inline-block;
}

.breadcrumb li + li:before {
  content: ">";
  margin: 0 5px;
}

.breadcrumb .active {
  color: #777777;
}

在这个样式中，我们定义了 breadcrumb 的背景、边框半径和间距。对于每个面包屑项目，我们将其设置为内联块元素，并在其左侧添加一个 > 标志来分隔各部分。最后一个 <li> 元素使用 class 属性为 active，字体颜色为灰色。

完整例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>基础 CSS 面包屑</title>
    <style>
      .breadcrumb {
        padding: 8px 15px;
        margin-bottom: 20px;
        list-style: none;
        background-color: #f5f5f5;
        border-radius: 4px;
      }

      .breadcrumb li {
        display: inline-block;
      }

      .breadcrumb li + li:before {
        content: ">";
        margin: 0 5px;
      }

      .breadcrumb .active {
        color: #777777;
      }
    </style>
  </head>
  <body>
    <ul class="breadcrumb">
      <li><a href="#">首页</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">产品</a></li>
      <li class="active">面包屑</li>
    </ul>
  </body>
</html>

返回的代码片段

# 基础 CSS 面包屑

面包屑是一个网站的重要的导航元素，它可以帮助用户更好地理解他们所浏览的网站的结构。在这篇文章中，我们将介绍如何使用基础 CSS 创建面包屑。

## HTML 结构

面包屑可以用 `<ul>` 和 `<li>` 构建，如下所示：

```html
<ul class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li><a href="#">产品</a></li>
  <li class="active">面包屑</li>
</ul>
```

请注意，这个结构必须包含一个 `class` 属性为 `breadcrumb` 的 `<ul>` 元素，以及一个 `class` 属性为 `active` 的最后一个 `<li>` 元素，以指示当前页面。

## CSS 样式

接下来，我们需要编写一些基础的 CSS 样式，用于设置面包屑的外观和间距。
```css
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.breadcrumb li {
  display: inline-block;
}

.breadcrumb li + li:before {
  content: ">";
  margin: 0 5px;
}

.breadcrumb .active {
  color: #777777;
}
```
在这个样式中，我们定义了 `breadcrumb` 的背景、边框半径和间距。对于每个面包屑项目，我们将其设置为内联块元素，并在其左侧添加一个 `>` 标志来分隔各部分。最后一个 `<li>` 元素使用 `class` 属性为 `active`，字体颜色为灰色。

## 完整例子

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>基础 CSS 面包屑</title>
    <style>
      .breadcrumb {
        padding: 8px 15px;
        margin-bottom: 20px;
        list-style: none;
        background-color: #f5f5f5;
        border-radius: 4px;
      }

      .breadcrumb li {
        display: inline-block;
      }

      .breadcrumb li + li:before {
        content: ">";
        margin: 0 5px;
      }

      .breadcrumb .active {
        color: #777777;
      }
    </style>
  </head>
  <body>
    <ul class="breadcrumb">
      <li><a href="#">首页</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">产品</a></li>
      <li class="active">面包屑</li>
    </ul>
  </body>
</html>