js实现在800px*800px的盒子中,有一个100*100的圆形图片,在图片的四周是关于介绍图片的信息标签(10个标签)
时间: 2024-04-09 20:34:06 浏览: 12
您可以使用以下的HTML和CSS来实现您的需求:
```html
<div class="container">
<div class="image-container">
<img src="path/to/your/image.jpg" alt="圆形图片">
</div>
<div class="label-container">
<span class="label">标签1</span>
<span class="label">标签2</span>
<span class="label">标签3</span>
<span class="label">标签4</span>
<span class="label">标签5</span>
<span class="label">标签6</span>
<span class="label">标签7</span>
<span class="label">标签8</span>
<span class="label">标签9</span>
<span class="label">标签10</span>
</div>
</div>
```
```css
.container {
width: 800px;
height: 800px;
position: relative;
}
.image-container {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.label-container {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.label {
display: inline-block;
margin: 5px;
padding: 5px;
background-color: #f2f2f2;
}
```
这段代码会在一个800px * 800px的容器中创建一个100px * 100px的圆形图片,并在图片四周添加了10个标签。您可以将图片的路径替换为您自己的图片路径,并根据需要调整标签的样式。