效果图
index.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>
<style>
*{
margin: 0;
padding: 0;
}
.catagory{
width: 100%;
}
.catagory .inner-nav{
display: flex;
justify-content: space-around;
}
.inner-nav .item{
width: 15%;
}
.item a{
display: block;
text-decoration: none;
color: #666666;
text-align: center;
margin-bottom: 10px;
}
.item a img{
width: 100%;
}
</style>
</head>
<body>
<nav class="catagory">
<div class="inner-nav">
<div class="item">
<a href="#">
<img src="./img/1.png">
天猫新品
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/2.png">
今日爆款
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/3.png">
天猫国际
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/4.png">
饿了么
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/5.png">
天猫超市
</a>
</div>
</div>
<div class="inner-nav">
<div class="item">
<a href="#">
<img src="./img/6.png">
充值中心
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/7.png">
机票酒店
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/8.png">
金币庄园
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/9.png">
阿里拍卖
</a>
</div>
<div class="item">
<a href="#">
<img src="./img/10.png">
淘宝吃货
</a>
</div>
</div>
</nav>
</body>
</html>
