php - 用照片创建树状图的技巧？

Question

我希望使用 PHP、HTML 和 CSS 创建动态 TreeMap 。下面的模型:

图像需要是可点击的链接，我不希望使用图像映射，因为这对于即时生成来说成本很高。

我正在考虑使用一些创意 <div>像这样放置:

其中虚线表示不可见边框，实线表示可见边框。 html 会很粗糙，但生成它的代码应该只有几个干净的循环。

有没有更好的办法？

Answer 1

您需要生成的 HTML 结构是一个普通的旧嵌套列表，例如:

<ul>
  <li>Group 1
    <ul>
      <li><a href="foo">Item 1</a></li>
      <li><a href="bar">Item 2</a></li>
    </ul>
  </li>
  <li>Group 2
    <ul>
      <li><a href="baz">Item A</a></li>
    </ul>
  </li>
</ul>

非常简单，您不需要添加任何“粗糙”的标记，或者根本不需要任何标记。使用 CSS 为每个元素设置相应的样式。 Here's a tutorial .不过它有点老了——现在每个现代浏览器都支持 :last-child 所以你不需要任何 JavaScript 除非你担心那些 IE6/7/8 用户。