树枝列 - HTML

在 HTML 中，树枝列被用来表示有层次关系的数据。最常见的应用场景是导航菜单或者分类列表。

基本语法

使用 ul 和 li 标签来创建树枝列。其中，ul 标签表示一个无序列表，li 标签表示列表项。列表项可以包含其他列表，用以表示层级关系。

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>
    列表项 3
    <ul>
      <li>子列表项 1</li>
      <li>子列表项 2</li>
    </ul>
  </li>
  <li>列表项 4</li>
</ul>

样式

使用 CSS 可以对树枝列进行样式设置。以下是一个简单的树枝列样式代码示例。

<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li {
    margin: 0;
    padding: 12px;
  }
  /* 子列表 */
  ul ul {
    display: none;
  }
  /* 悬浮效果 */
  li:hover > ul {
    display: block;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
</style>

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>
    列表项 3
    <ul>
      <li>子列表项 1</li>
      <li>子列表项 2</li>
    </ul>
  </li>
  <li>列表项 4</li>
</ul>

以上样式定义了无序列表的样式，使得树枝列更加美观。当鼠标悬浮在具有子列表项的列表项上时，它们的子列表会展开，并在父节点下方显示。

总结

• 使用 ul 和 li 标签来创建树枝列，利用层级关系表达数据结构。
• 树枝列可以使用 CSS 进行样式设置，使其更加美观。
• 鼠标悬浮在具有子列表项的列表项上时，它们的子列表会展开。