网格图标 html 模板

Question

我想构建一个 Web 应用程序，其主界面包含网格布局中的图标列表。我知道的最好的例子是Icloud，如下所示。

云界面

我不擅长编写 HTML 代码，那么我在哪里可以找到这样的开源模板？

谢谢

Answer 1

事实上，Julian Chan说的：在这种情况下，https://getbootstrap.com/真的很有帮助。

Bootstrap使用了网格系统，它有一个关于它的行为和工作的很好的文档。 (https://getbootstrap.com/docs/4.4/layout/grid/网格系统的文档(。

我为您做了一个小例子：使用引导网格系统 https://www.bootply.com/JWzQ2x6ARu

<div class="container">
<div class="row">
<div class="col-md-2">
APP ICON 1
</div>
<div class="col-md-2">
APP ICON 2
</div>
<div class="col-md-2">
APP ICON 3
</div>
<div class="col-md-2">
APP ICON 4
</div>
<div class="col-md-2">
APP ICON 5
</div>
<div class="col-md-2">
APP ICON 6
</div>
</div> <!-- End of Row 1 -->
<div class="row">
<div class="col-md-2">
APP ICON 1
</div>
<div class="col-md-2">
APP ICON 2
</div>
<div class="col-md-2">
APP ICON 3
</div>
<div class="col-md-2">
APP ICON 4
</div>
<div class="col-md-2">
APP ICON 5
</div>
<div class="col-md-2">
APP ICON 6
</div>
</div> <!-- End of Row 2 -->
</div>

在这种情况下，我为div 提供了一类 col-md-2 来复制您链接的图像。

希望对您有所帮助！ 有好的一天！

Answer 2

简单的实现：

ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
li {
box-sizing: border-box;
list-style: none;
width: 25%;
padding: 20px;
position: relative;
display: flex;
justify-content: center;
}
img{
width: 150px;
height: 150px;
cursor: pointer;
}

<ul>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
<li><img alt="" src="https://cdn1.iconfinder.com/data/icons/industrial-and-construction-2-1/129/132-512.png"></li>
</ul>