CSS 可以帮助我们快速制作出漂亮的图标排版效果,比如下面这个实例就是使用 CSS 创建了 8 个图标排成了两行:<html> <head> &
CSS 可以帮助我们快速制作出漂亮的图标排版效果,比如下面这个实例就是使用 CSS 创建了 8 个图标排成了两行:
<html>
<head>
<title>8 个图标排成两行</title>
<style type="text/css">
.icon-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.icon-item {
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 60px;
background: #4dd0e1;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="icon-list">
<div class="icon-item">A</div>
<div class="icon-item">B</div>
<div class="icon-item">C</div>
<div class="icon-item">D</div>
<div class="icon-item">E</div>
<div class="icon-item">F</div>
<div class="icon-item">G</div>
<div class="icon-item">H</div>
</div>
</body>
</html>
上述代码中使用了 Flex 布局,对于每一个图标项都设置了相应的宽高、边距、圆角、字体大小和背景,同时也设置了阴影,以使元素更加有层次感和立体感。
通过这样的方式,我们可以轻松地制作出 8 个图标并排的效果。利用类似的 CSS 样式,我们还可以实现更多不同形态的排版效果。
粉丝
0
关注
0
收藏
0