<!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;
}
/* 设置外层容器 */
.nav{
width: 100%;
}
.nav-inner{
/* 设置为弹性容器 */
display: flex;
/* 设置主轴的分布 */
justify-content: space-around;
}
.item{
text-align: center;
width: 18%;
}
.item img{
/* 设置图片宽度和父元素一样 */
width: 100%;
}
.item a{
color:#333;
text-decoration: none;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 创建外层的容器 -->
<nav class="nav">
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="./淘宝图片/1.png" alt="">
<span>天猫</span>
</a>
</div class="item">
<div class="item">
<a href="#">
<img src="./淘宝图片/2.png" alt="">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./淘宝图片/3.png" alt="">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./淘宝图片/4.png" alt="">
<span>充值中心</span>
</a>
</div>
<div class="item"> <a href="#">
<img src="./淘宝图片/5.png" alt="">
<span>飞猪旅行</span>
</a>
</div>
</div>
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="./淘宝图片/6.png" alt="">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./淘宝图片/7.png" alt="">
<span>拍卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./淘宝图片/8.png" alt="">
<span>分类</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="./淘宝图片/9.png" alt="">
<span>外卖</span>
</a>
</div>
<div class="item"> <a href="#">
<img src="./淘宝图片/10.png" alt="">
<span>天猫</span>
</a>
</div>
</div>
</nav>
</body>
</html>
CSS弹性盒练习-淘宝手淘导航
猜你喜欢
转载自blog.csdn.net/weixin_47401101/article/details/113401341
今日推荐
周排行