已知3个点,实现使得每个点有一个名称并显示出来,写一段html/css代码
时间: 2024-04-17 21:23:16 浏览: 11
可以使用以下的HTML和CSS代码实现显示3个点及其名称:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.point {
position: relative;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.point-label {
position: absolute;
top: -20px;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="point" style="left: 100px; top: 100px;"></div>
<div class="point-label" style="left: 90px; top: 80px;">Point A</div>
<div class="point" style="left: 200px; top: 150px;"></div>
<div class="point-label" style="left: 190px; top: 130px;">Point B</div>
<div class="point" style="left: 300px; top: 200px;"></div>
<div class="point-label" style="left: 290px; top: 180px;">Point C</div>
</body>
</html>
```
在这段代码中,每个点都通过一个`<div>`元素来表示,并使用`position: relative`属性进行定位。点的样式由`.point`类定义,包括宽度、高度、边框半径和背景颜色。每个点的名称由一个相邻的`<div>`元素和`.point-label`类定义,使用`position: absolute`属性相对于点进行定位,并通过`left`和`top`属性设置位置。你可以根据需要调整点和名称的位置和样式。