HTML5 固定底部的footer功能栏

最近学习了一下html5，感觉学到不少知识，特来跟大家分享下，自定义footer实现固定底部的功能栏，效果如图：

html代码：

<div class="nav">
            <ul>
                <li>
                    <a href="#"><span><img src="images/ni4.jpg" height="20"></span><span>充值卡</span></a>
                </li>
                <li style="position:relative;">
                    <a href="#"><span><img src="images/ni3.jpg" height="20"></span><span>购买记录</span></a>
                </li>
                <li>
                    <a href="#"><span><img src="images/ni2.jpg" height="20"></span><span>我的篮子</span></a>
                </li>
                <li>
                    <a href="#"><span><img src="images/ni5.jpg" height="20"></span><span>个人中心</span></a>
                </li>
            </ul>
        </div>

css代码：

.nav {
    background: #009c39;
    padding: 10px 0 6px 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}
.nav ul {
    height: 0px;
}
.nav ul li {
    float: left;
    width: 25%;
    text-align: center;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.nav ul li span {
    display: block;
    color: #fff;
    font-size: 14px;
    font-family: "微软雅黑";
    line-height: 22px;
}
a {
    color: #000;
    text-decoration: none;
}
* {
    padding: 0;
    margin: 0;
    list-style: none;
    font-weight: normal;
}

好了，就这些了 ^~^

版权声明：本文为博主原创文章，未经博主允许不得转载。

转载于:https://www.cnblogs.com/sidxu/p/4940365.html