HTML5+CSS3制作底部导航栏

目录

前言

一、底部导航栏示例图

二、HTML框架

1.一号盒子

2.二号盒子

总结

---

​​​​​​

前言

        在日常的网上冲浪中，我们常常在网页最底部，看到一大堆链接，非常整齐，一目了然，那么是如何实现的呢？......

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、底部导航栏示例图

 

 图1-底部导航栏

 

二、HTML框架

1.一号盒子

        由图1可知，该部分由两个个盒子划分，我们先搭建一号盒子的框架，这里我们用，<dl> 标签定义一个描述列表。<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。

<dl>
    <dt>服务指南</dt>
    <dd><a href="#">购物流程</a></dd>
    <dd><a href="#">会员介绍</a></dd>
    <dd><a href="#">生活旅行/团购</a></dd>
    <dd><a href="#">常见问题</a></dd>
    <dd><a href="#">大家电</a></dd>
    <dd><a href="#">联系客服</a></dd>
</dl>

接着对该列表css样式宽高，内外边距，浮动进行一些设置。这里因为重复操作较多，所以描述第一个列表即可。应注意多个dl之间设置浮动用以成行显示。

.mod_help {
            height: 185px;
            border-bottom: 1px solid #ccc;
            padding-top: 20px;
            padding-left: 50px;
        }
        
.mod_help dl {
            float: left;
            width: 200px;
        }
        
.mod_help dl dt {
            font-size: 16px;
            margin-bottom: 10px;
        }


/*为最后一个dl显示二维码设置样式*/

.mod_help dl:last-child {
            width: 90px;
            text-align: center;
        }

2.二号盒子

        这里的做法很简单，使用div把所有的a标签包裹住，设置浮动，边距，行高来调整位置。 

 

图2-部分展示代码

 

.mod_copyright {
        text-align: center;
        padding-top: 20px;
        }
        
.links {
        margin-bottom: 15px;
        }
        
.links a {
        margin: 0 3px;
        }

.copyright {
        line-height: 20px;
        }

 

---

总结

底部导航栏实现起来比较简单，新手可以试一试。