0

该建筑（博物馆）有 7 层（+3 到 -3），每层分为不同的房间/区域。将鼠标悬停在某个区域上将显示一个描述该区域的弹出窗口。

我正在寻找一些能够准确代表 7 个级别及其区域的标记。该计划应该是有意义的，并且在没有任何 CSS/JS 的情况下是“可导航的”。

编辑：澄清一下，标记只需要代表建筑物的“语义结构”，而不是空间布局（CSS 将添加到布局和图形中）。

4

4 回答 4

2

对我来说闻起来像一个嵌套的无序列表。

于 2008-12-23T13:23:50.150 回答
1

看看微格式，特别是XOXO 微格式。

于 2008-12-23T14:03:12.473 回答
1

听起来像是 SVG 的工作？（圣何塞的 Adob​​e 大楼示例）

我意识到这确实使用了 JavaScript，但如果你有 7 层楼 * 10 多个房间？使用纯 CSS 会变得相当麻烦。您可以使用一些<ul>元素来制作嵌套级别的房间，但如果建筑物这么大，我认为列表（即使呈现为块）对查看没有意义。

于 2008-12-23T13:17:21.100 回答
1

使用 HTML5（但如果您想使用 HTML 4.01，应该不会有太大区别）：

如果您想用图像表示建筑物，您可以使用由和组成的Image Map。(属性)可以链接到包含房间详细描述的页面。该属性可以包含房间的简短描述，例如“草莓房间（4 级）”。mapareaareahrefalt

如果标记更像是替代文本（例如，如果您使用object，canvas或类似的东西），我会使用标题结构：

<section>
 <h1>The building</h1>

 <section id="level-1">
  <h1>Level 1</h1>

   <section id="level-1-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-1-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-1 -->

 <section id="level-2">
  <h1>Level 2</h1>

   <section id="level-2-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-2-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-2 -->

</section>

（对于 HTML 4.01，您将使用div代替section并相应地调整标题级别）

于 2012-08-27T09:39:46.717 回答