前言

做的是京东移动端的导航区域

步骤

1. 一个nav标签 ，装十个a标签
2. 把a标签转变为盒子
3. 每个盒子宽度百分之20
4. 上面放图片，下面放文字
5. 加text-align=center，文字对齐

效果图

代码

HTML：

<!-- nav部分 -->
        <nav>
            <a href="#">
                <img src="upload/nav1.png" alt="">
                <span>京东超市</span>
            </a>
            <a href="#">
                <img src="upload/nav2.png" alt="">
                <span>数码电器</span>
            </a> <a href="#">
                <img src="upload/nav3.png" alt="">
                <span>京东服饰</span>
            </a> <a href="#">
                <img src="upload/nav4.png" alt="">
                <span>京东生鲜</span>
            </a> <a href="#">
                <img src="upload/nav5.png" alt="">
                <span>京东到家</span>
            </a> <a href="#">
                <img src="upload/nav6.png" alt="">
                <span>充值缴费</span>
            </a> <a href="#">
                <img src="upload/nav7.png" alt="">
                <span>9.9元拼</span>
            </a> <a href="#">
                <img src="upload/nav8.png" alt="">
                <span>领劵</span>
            </a> <a href="#">
                <img src="upload/nav9.png" alt="">
                <span>领津贴</span>
            </a> <a href="#">
                <img src="upload/nav10.png" alt="">
                <span>PLUS会员</span>
            </a>

        </nav>

CSS

/* nav区域 */
nav {
    padding-top: 8px;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;

}

nav a img {
    width: 40px;
    margin: 10px 0;
}

nav a span {
    display: block;
}