移动端实现简单导航

HTML:

 <!-- section nav -->
    <div class="wrap">
        <div class="sectionnav">
            <a href="#">
                <img src="./images/index/icon_1.jpg" alt="limitedshopping">
                <em>限时抢购</em>
            </a>
            <a href="#">
                <img src="./images/index/icon_2.jpg" alt="creditmall">
                <em>积分商城</em>
            </a>
            <a href="#">
                <img src="./images/index/icon_3.jpg" alt="contactus">
                <em>联系我们</em>
            </a>
            <a href="#">
                <img src="./images/index/icon_4.jpg" alt="itemclassification">
                <em>商品分类</em>
            </a>
        </div>
    </div>

CSS:

.wrap .sectionnav {
  width: 100%;
  max-width: 750px;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.wrap .sectionnav a {
  display: inline-block;
  text-align: center;
}
.wrap .sectionnav a img {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.2rem;
}
.wrap .sectionnav a em {
  font: 0.3rem/1 "微软雅黑";
  color: #717171;
}