felx 仿淘宝导航

 

 




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .nav-wrapper{
            width:100%;
            display: flex;
            flex-flow: row wrap;
            /*justify-content: space-around;*/
        }

        .nav-inner{
            width: calc(20% - 10px);
            margin: 0 5px;
            text-align: center;
        }

        .nav-inner img{
            width:100%;
        }

        .nav-inner span{
            font-size: .26rem;
            color: #333;
        }

    </style>
</head>
<body>

    <div class="nav-wrapper">
        <div class="nav-inner">
            <img src="img/1.png" alt="">
            <span>天猫</span>
        </div>
        <div class="nav-inner">
            <img src="img/2.png" alt="">
            <span>聚划算</span>
        </div>
        <div class="nav-inner">
            <img src="img/3.png" alt="">
            <span>天猫国际</span>
        </div>
        <div class="nav-inner">
            <img src="img/4.png" alt="">
            <span>天猫超时</span>
        </div>
        <div class="nav-inner">
            <img src="img/5.png" alt="">
            <span>充值中心</span>
        </div>
        <div class="nav-inner">
            <img src="img/6.png" alt="">
            <span>飞猪旅行</span>
        </div>
        <div class="nav-inner">
            <img src="img/7.png" alt="">
            <span>领金币</span>
        </div>
        <div class="nav-inner">
            <img src="img/8.png" alt="">
            <span>淘宝</span>
        </div>
        <div class="nav-inner">
            <img src="img/9.png" alt="">
            <span>飞猪旅行</span>
        </div>
        <div class="nav-inner">
            <img src="img/10.png" alt="">
            <span>飞猪旅行测试</span>
        </div>
    </div>
</body>
</html>
posted @ 2020-09-27 22:15  13522679763-任国强  阅读(130)  评论(0)    收藏  举报