里面有一些语言图标，想用的可以去iconfont-阿里巴巴矢量图标库里面寻找，这类图标跟文字一样可以设置大小、文本居中之类的，并不算严格意义上的图片，废话不多说，直接上成果和代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../img/语言图标/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 955px;
height: 1420px;
margin: 0 auto;
/* background: yellow; */
display: flex;
flex-direction: column;
}
/* header设置 */
header{
height: 124px;
background: #232939;
display: flex;
color: white;
}
header i.iconfont{
width: 118px;
height: 124px;
line-height: 124px;
text-align: center;
font-size: 48px;
}
header span{
font-size: 40px;
flex: 1;
height: 124px;
line-height: 124px;
/* text-align: center; */
}
/* footer设置 */
footer{
height: 128px;
background: gray;
display: flex;
}
footer div{
flex: 1;
/* border: 1px solid red;
box-sizing: border-box; */
display: flex;
flex-direction: column;
justify-content: center;
color: #acadaf;
background: white;
}
footer div:hover{
color: #06a9ee;
}
footer div i.iconfont{
height: 66px;
line-height: 66px;
text-align: center;
font-size: 58px;
}
footer div span{
height: 36px;
line-height: 36px;
text-align: center;
font-size: 28px;
}
/* section设置 */
section{
flex: 1;
background: #f4f5f9;
}
.main{
display: flex;
height: 278px;
justify-content: space-around;
align-items: center;
color: white;
background: #232939;
}
.main div{
width: 120px;
height: 168px;
/* background: red; */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main div i{
font-size: 110px;
text-align: center;
}
.main div span{
font-size: 32px;
text-align: center;
}
.list{
display: flex;
flex-wrap: wrap;
background: white;
}
.list div{
width: 25%;
height: 208px;
border: 1px solid gray;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.list div i{
height: 77px;
line-height: 77px;
text-align: center;
font-size: 55px;
color: green;
}
.list div span{
height: 61px;
line-height: 61px;
text-align: center;
font-size: 30px;
}
.pic{
margin-top: 25px;
}
.pic img{
width: 955px;
height: 221px;
}
</style>
</head>
<body>
<div class="box">
<header>
<i class="iconfont icon-iconfonticon1"></i>
<span>账单</span>
<i class="iconfont icon-iconfonticon4"></i>
<i class="iconfont icon-iconfonticon4"></i>
<i class="iconfont icon-iconfonticon4"></i>
</header>
<section>
<div class="main">
<div>
<i class="iconfont icon-saoyisao"></i>
<span>扫一扫</span>
</div>
<div>
<i class="iconfont icon-saoyisao"></i>
<span>扫一扫</span>
</div>
<div>
<i class="iconfont icon-saoyisao"></i>
<span>扫一扫</span>
</div>
<div>
<i class="iconfont icon-saoyisao"></i>
<span>扫一扫</span>
</div>
</div>
<div class="list">
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
<div>
<i class="iconfont icon-huokuan"></i>
<span>贷款</span>
</div>
</div>
<div class="pic">
<img src="../img/支付宝01.png" alt="">
</div>
</section>
<footer>
<div>
<i class="iconfont icon-jizhangben"></i>
<span>记账本</span>
</div>
<div>
<i class="iconfont icon-jizhangben"></i>
<span>记账本</span>
</div>
<div>
<i class="iconfont icon-jizhangben"></i>
<span>记账本</span>
</div>
<div>
<i class="iconfont icon-jizhangben"></i>
<span>记账本</span>
</div>
</footer>
</div>
</body>
</html>