html5画一个div地图图例
时间: 2024-03-17 18:45:14 浏览: 10
好的,下面是一个简单的示例代码,可以画一个基本的div地图图例:
```
<div id="map-legend">
<h2>地图图例</h2>
<div class="legend-item">
<div class="color-box" style="background-color: #FF0000;"></div>
<span>高温</span>
</div>
<div class="legend-item">
<div class="color-box" style="background-color: #00FF00;"></div>
<span>中温</span>
</div>
<div class="legend-item">
<div class="color-box" style="background-color: #0000FF;"></div>
<span>低温</span>
</div>
</div>
```
上面的代码中,我们创建了一个id为"map-legend"的div元素,用于包含整个地图图例。在内部,我们创建了三个div元素,分别代表三种不同的地图颜色,包括高温、中温和低温。每个颜色块都有一个对应的文字描述,放在一个span元素中。
我们使用CSS样式来设置每个颜色块的背景颜色和其他样式。例如,我们使用"color-box"类来设置颜色块的样式,使用"legend-item"类来设置每个图例项的样式。
您可以根据实际需要对此示例代码进行修改和扩展。希望能对您有所帮助!