用css制作一个网状图
时间: 2023-06-10 19:06:14 浏览: 59
可以使用CSS3的伪元素和位置属性来制作网状图。以下是一个简单的示例代码:
HTML代码:
```html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码:
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.box::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 1px solid #ccc;
border-radius: 50%;
}
```
解释:
- 使用flex布局将所有盒子水平居中,并使其自动换行。
- 给每个盒子添加一个相对定位,使其内部的伪元素能够相对于其位置进行定位。
- 给每个盒子添加一个伪元素,用于表示网状图中的连接点。使用绝对定位将其放置在盒子的中心,并调整其大小和样式。