CSS画轴 |css li 菜单

.axis {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.axis::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 1px;
height: 100%;
background-color: #000;
}
.axis::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 1px;
background-color: #000;
}
.axis .x-axis {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #000;
}
.axis .y-axis {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 1px;
background-color: #000;
}

首先，大家创建了一个class为axis的容器，该容器的宽度和高度可以根据实际情况进行调整。在该容器内部，大家使用before和after伪元素创建了垂直和水平的轴线。接下来，大家再创建两个class分别为x-axis和y-axis的div，分别作为x轴和y轴的坐标线。这两个div也采用了绝对定位的方式进行排列。最后，大家可以使用其他CSS属性对轴线进行调整，比如颜色、宽度等。