实现以上图片中的内容
代码
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.col {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
}
img {
width: 50px;
height: 50px;
}
</style>
</style>
</head>
<body>
<div class="box">
<div class="row">
<div class="col">
<img src="F:\web-前端\1.png" alt="">
<p>京豆</p>
</div>
<div class="col">
<img src="F:\web-前端\2.png" alt="">
<p>充值中心</p>
</div>
<div class="col">
<img src="F:\web-前端\3.png" alt="">
<p>政府消费券</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="F:\web-前端\4.png" alt="">
<p>礼品卡</p>
</div>
<div class="col">
<img src="F:\web-前端\5.png" alt="">
<p>金条借款</p>
</div>
<div class="col">
<img src="F:\web-前端\6.png" alt="">
<p>国家补贴</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="F:\web-前端\7.png" alt="">
<p>爱回收</p>
</div>
<div class="col">
<img src="F:\web-前端\8.png" alt="">
<p>企业计划购</p>
</div>
<div class="col">
<img src="F:\web-前端\9.png" alt="">
<p>买贵双倍赔</p>
</div>
</div>
<div class="row">
<div class="col">
<img src="F:\web-前端\10.png" alt="">
<p>游戏</p>
</div>
<div class="col">
<img src="F:\web-前端\11.png" alt="">
<p>企采返E卡</p>
</div>
<div class="col">
<img src="F:\web-前端\12.png" alt="">
<p>酒店</p>
</div>
</div>
</div>
</body>
</html>
运行结果如下：
