<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子（flex）实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.icon_nav{
max-width: 960px;
margin: 30px auto;
}
.flex_box{
display: flex;
justify-content: space-around;
}
.flex_box .item .item_a{
display: inline-block;
width: 61px;
height: 68px;
text-align: center;
text-decoration: none;
}
.flex_box .item .item_a img{
width: 61px;
}
</style>
</head>
<body>
<div class="icon_nav">
<div class="flex_box">
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i1.jpg" alt="">
<span>天狗</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i1.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i1.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i1.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i1.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
</div>
<div class="flex_box">
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i1.jpg" alt="">
<span>天狗</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i2.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i2.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i2.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
<div class="item">
<a class="item_a" href="">
<img src="../Css3学习\i2.jpg" alt="">
<span>天狗聚</span>
</a>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号