官网上的图片
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/88d3c9895db006575c7375d10768e827.png)
我们就只写出大概框架
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b6867cf30bdfcdfbf9f4be48f55d86a1.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 300px;
height: 200px;
background-color: rgba(0,0,0,0.5);
margin: 100px auto;
}
.box li{
float: left;
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
li::before{
content: "";
display:block;
width: 90px;
height: 1px;
background-color:blue;
position: absolute;
left: 5px;
}
li::after{
content: "";
display: block;
width: 1px;
height: 90px;
background-color:blue;
position: absolute;
top: 5px;
}
li:nth-child(1)::after{
display: none;
}
li:nth-child(4)::after{
display: none;
}
li:nth-child(-n+3)::before{
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
图标字体和图片后面有空再加上去