html5画一个div地图图例,包含css
时间: 2024-03-17 13:45:30 浏览: 11
下面是一个简单的HTML5代码示例,用于绘制一个包含CSS样式的div地图图例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 div地图图例</title>
<style>
.map-legend {
background-color: #f7f7f7;
border: 1px solid #ccc;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
max-width: 200px;
}
.map-legend-item {
margin-bottom: 5px;
}
.map-legend-color {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: middle;
}
.map-legend-label {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="map-legend">
<div class="map-legend-item">
<div class="map-legend-color" style="background-color: #ff0000;"></div>
<div class="map-legend-label">高温区域</div>
</div>
<div class="map-legend-item">
<div class="map-legend-color" style="background-color: #00ff00;"></div>
<div class="map-legend-label">低温区域</div>
</div>
<div class="map-legend-item">
<div class="map-legend-color" style="background-color: #0000ff;"></div>
<div class="map-legend-label">中温区域</div>
</div>
</div>
</body>
</html>
```
这个示例中,我们定义了一个名为"map-legend"的CSS类,用于设置整个div图例的样式。"map-legend-item"类用于设置每个条目的样式,"map-legend-color"类用于设置每个条目的颜色块的样式,"map-legend-label"类用于设置每个条目的标签的样式。
在HTML部分,我们使用了一个包含三个条目的div图例。每个条目由一个颜色块和一个标签组成,它们各自使用了上面定义的CSS类。这样,我们就可以得到一个简单的div图例。