CSS 家族树

在本文中，我们将介绍如何使用纯HTML和CSS（或最少量的JS）创建CSS家族树。这个家族树可以用来展示一个家族成员之间的关系，让用户更清楚地了解家族的结构和成员之间的联系。

阅读更多：CSS 教程

HTML 结构

首先，我们来创建一个基本的HTML结构，用来容纳我们的家族树。我们将使用无序列表（ul）和列表项（li）的嵌套结构来表示家族树的层级关系。

<ul class="family-tree">
  <li>
    <a href="#">爷爷</a>
    <ul>
      <li>
        <a href="#">爸爸</a>
        <ul>
          <li>
            <a href="#">我</a>
          </li>
          <li>
            <a href="#">哥哥</a>
          </li>
          <li>
            <a href="#">姐姐</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">叔叔</a>
        <ul>
          <li>
            <a href="#">堂兄弟</a>
          </li>
          <li>
            <a href="#">堂妹</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

在上面的例子中，我们创建了一个家族树，包含爷爷、爸爸、叔叔和一些其他成员。列表项中的超链接可以用来展示成员的详细信息，比如照片、姓名等。

CSS 样式

接下来，我们来添加一些样式来美化我们的家族树。我们可以使用CSS选择器和属性来设置列表项的样式，形成层级结构。

.family-tree {
  list-style-type: none;
  padding: 0;
}

.family-tree li a {
  display: block;
  padding: 10px;
  background-color: #f3f3f3;
  margin-bottom: 10px;
  text-decoration: none;
  color: #333;
}

.family-tree ul {
  margin-left: 20px;
}

在上面的例子中，我们使用了.family-tree类选择器来设置整个家族树的样式。我们将列表的样式设置为无序列表（list-style-type: none），并去除了默认的缩进和边距。

.family-tree li a选择器用来设置列表项的样式。我们将超链接设置为块级元素（display: block），并添加了一些间距和背景颜色，让列表项看起来更美观。

.family-tree ul选择器用来设置嵌套的列表的样式。我们将缩进设置为20像素，使得每一层次的列表项都比上一层次向右缩进一些，形成层级结构。

最少量的JS

虽然我们可以通过纯HTML和CSS来创建家族树，但有时候我们可能需要一些JS来添加一些动态效果或交互功能。

下面是一个使用最少量的JS为家族树添加展开和折叠功能的例子：

<ul class="family-tree">
  <li>
    <a href="#">爷爷</a>
    <ul>
      <li>
        <a href="#">爸爸</a>
        <ul>
          <li>
            <a href="#">我</a>
          </li>
          <li>
            <a href="#">哥哥</a>
          </li>
          <li>
            <a href="#">姐姐</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">叔叔</a>
        <ul>
          <li>
            <a href="#">堂兄弟</a>
          </li>
          <li>
            <a href="#">堂妹</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script>
  const links = document.querySelectorAll('.family-tree li a');

  links.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();

      const siblingUl = e.target.nextElementSibling;

      if (siblingUl.style.display === 'none') {
        siblingUl.style.display = 'block';
      } else {
        siblingUl.style.display = 'none';
      }
    });
  });
</script>

上面的例子中，我们使用了一个简单的事件监听器来处理点击事件。当用户点击一个连接时，我们获取该连接元素的下一个兄弟元素（即嵌套的ul），然后切换该元素的显示状态，从而实现展开和折叠功能。

总结

通过使用纯HTML和CSS（或最少量的JS），我们可以创建出漂亮的家族树，用来展示家族成员之间的关系。我们可以使用嵌套的无序列表来表示层级结构，并通过CSS样式来美化和定制家族树的外观。如果需要一些动态效果或交互功能，我们可以使用一些简单的JS代码来实现。这种家族树可以在网站或应用中使用，以提供更好的用户体验和信息展示。