html 热图标点自适应屏幕的框架

要实现热图标点自适应屏幕的框架，可以采用以下步骤：

1. 使用HTML和CSS创建一个容器，它将包含所有的热图标点。

2. 在容器中使用CSS将热图标点布局成网格或列表形式。

3. 使用JavaScript检测屏幕大小的变化，并根据屏幕大小重新布局热图标点。

4. 当用户点击热图标点时，使用JavaScript显示关联的信息或链接。

以下是一个简单的示例代码：

HTML:

<div id="hotspot-container">
  <div class="hotspot" data-x="20%" data-y="30%">
    <img src="hotspot.png" alt="Hotspot">
    <div class="info">Hotspot information goes here</div>
  </div>
  <div class="hotspot" data-x="50%" data-y="60%">
    <img src="hotspot.png" alt="Hotspot">
    <div class="info">Hotspot information goes here</div>
  </div>
  <div class="hotspot" data-x="80%" data-y="10%">
    <img src="hotspot.png" alt="Hotspot">
    <div class="info">Hotspot information goes here</div>
  </div>
</div>

CSS:

#hotspot-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hotspot {
  position: absolute;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.hotspot img {
  display: block;
  width: 50px;
  height: 50px;
}

.hotspot:hover {
  transform: scale(1.1);
}

.hotspot .info {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100px;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

.hotspot:hover .info {
  display: block;
}

JavaScript:

function layoutHotspots() {
  var container = document.getElementById('hotspot-container');
  var hotspots = container.querySelectorAll('.hotspot');
  var width = container.offsetWidth;
  var height = container.offsetHeight;
  
  for (var i = 0; i < hotspots.length; i++) {
    var hotspot = hotspots[i];
    var x = hotspot.getAttribute('data-x');
    var y = hotspot.getAttribute('data-y');
    hotspot.style.left = (width * parseFloat(x) / 100) + 'px';
    hotspot.style.top = (height * parseFloat(y) / 100) + 'px';
  }
}

window.addEventListener('resize', function() {
  layoutHotspots();
});

layoutHotspots();

此示例中，我们使用HTML和CSS创建了一个容器，并在其中放置了三个热图标点。每个热图标点都包含一个图像和一个信息框。

我们还定义了一些CSS样式，以使热图标点能够在容器中自适应布局，并在鼠标悬停时进行缩放和信息框显示。

在JavaScript中，我们编写了一个名为“layoutHotspots”的函数，该函数会在页面加载时和窗口大小变化时调用。该函数会重新计算每个热图标点的位置，并将其放置在容器中的正确位置。

最后，我们使用事件监听器来捕获窗口大小变化事件，并在窗口大小变化时重新布局热图标点。

这是一个简单的热图标点自适应屏幕的框架，可以根据需要进行扩展和自定义。