24张图标排成一个长方形的html代码,中间要空心
时间: 2024-04-30 22:19:01 浏览: 9
以下是一个利用 HTML 和 CSS 实现一个 24 张图标排成一个空心长方形的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>24张图标排成一个长方形</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 200px;
border: 2px solid black;
box-sizing: border-box;
padding: 10px;
margin: 0 auto;
justify-content: space-between;
}
.item {
width: 30px;
height: 30px;
border: 2px solid black;
box-sizing: border-box;
margin-bottom: 10px;
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
```
在这段代码中,我们使用了 Flexbox 布局来排列图标,通过 `display: flex` 将 `container` 容器设置为 Flex 容器,然后通过 `flex-wrap: wrap` 让图标换行。`justify-content: space-between` 则是让图标在容器中均匀分布,看起来更加美观。`item` 类则是用来定义每个图标的样式,其中 `background-color: white` 让图标背景为白色,形成空心的效果。