HTML+CSS写一个思维导图

HTML和CSS结合可以用来创建简单的静态思维导图，但它们主要用于展示结构，对于复杂的动态交互可能需要额外的JavaScript库。下面是一个基本的步骤：

1. **HTML结构**:
使用`<div>`标签作为思维导图的基本元素，通常包含一个中心节点（主标题）和其他分支节点 (`<ul> 和 <li>`)。

<div class="mindmap">
  <div class="root">中心主题</div>
  <ul class="branches">
    <li>分支1<ul><li>子分支1.1</li></ul></li>
    <li>分支2<ul><li>子分支2.1</li><li>子分支2.2</li></ul></li>
  </ul>
</div>

2. **CSS样式**:
使用CSS定义布局、颜色、字体等，比如让分支从根节点水平延伸出来，并添加适当的图标和间距。

.mindmap {
  display: flex;
}

.root {
  font-size: 24px;
}

.branches {
  list-style-type: none;
  padding-left: 40px; /* 根据需求调整缩进 */
}

.branches li::before {
  content: "• ";
  color: #999;
}