float浮动在制作导航栏上的巧用

Posted 2020-11-20 poetsaw

在学习过程中，要求实现在网页底端布置成组导航栏的功能，效果如图：

对于如何实现该功能，萨摩对图片进行了观察，初步的想法是，建立三行p标签实现分行，每行标签里嵌套5个a标签，之后统一调节a标签之间的margin实现对齐垂直方向的对齐。想法固然尚可，但在实际编码过程中，发现困难重重，主要问题在于第一行无论是文本字符数还是字体大小的样式都和二三行不一致，所以在垂直方向上的对齐排列难以用一条margin来统一实现。若用多条样式语句对特殊情况进行具体设置，虽然确实能实现目标，但多条语句不但增大了开发者的劳动量同时大大增加了代码出错的概率。因此，最合适的做法是思考新的算法。在老师的启发下，结合新学的知识，萨摩茅塞顿开。水平方向上分解不行，那就垂直方向上分解。可以建立五列aside标签，每一列aside里先对三行a标签进行垂直方向对齐，再利用浮动将五列aside进行left浮动。因为五列aside并没有超越包含块宽度，因此可以自动整齐地水平居左对齐，这样就能实现水平和垂直方向上的对齐。

代码示例：

<aside>
            <h1><a href="">我是管理员</a></h1>
            <p><a href="">用户管理</a></p>
            <p><a href="">课程管理</a></p>
        </aside>
        <aside>
            <h1><a href="">我是学生</a></h1>
            <p><a href="">如何注册</a></p>
            <p><a href="">购买课程</a></p>
        </aside>
        <aside>
           <h1><a href="">联系我们</a></h1>
            <p><a href="">关于我们</a></p>
            <p><a href="">联系我们</a></p>
        </aside>
        <aside>
            <h1><a href="">商业应用</a></h1>
            <p><a href="">商务合作</a></p>
            <p><a href="">内容招募</a></p>
        </aside>
        <aside>
            <h1><a href="">系统帮助</a></h1>
            <p><a href="">购买课程</a></p>
            <p><a href="">作业提交</a></p>
        </aside>

a{
    padding: 17px;
    color: #e6e6e6;
    font-size: 14px;
}
h1>a{
    font-size: 16px;
    color: #ffffff;     
}
aside{
    padding: 50px;
    float: left;
    line-height: 2;
}

简单有效的几行代码即可实现功能。这项需求实现的思考过程给初学者的启发就在于，对各种不同标签的定义和作用固然要了然于心，对代码实现功能的架构上也固然重要，但相对于此，仔细研究思考算法，加深对标签的理解，做到灵活运用，远比生硬套用关键。这是对一个合格的前端工程师最基本的要求。