Html
    Css
    Js

    
                        
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 微软雅黑;
        }

        header {
            height: 60px;
            line-height: 60px;
            width: 100%;
            color: #fff;
            font-family: "黑体";
            font-weight: 200;
            font-size: 20px;
            /*背景色渐变*/
            background: linear-gradient(to bottom right, #F56739, #FB9749);
        }

        #content {
            background: linear-gradient(to bottom right, #f5f454, #fbd1b7);
        }

        .menu {
            display: block;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 70px;
            color: #474747;
            padding-top: 10px;
            border-top: 1px solid #eee;
            background-color: #fff;
        }

        .subMenu {
            width: 20%;
            float: left;
            cursor: pointer;
        }

        .menu_name {
            height: 30px;
            width: 100%;
            line-height: 30px;
        }

        img.menu_img {
            height: 24px;
            width: 24px;
        }

        img {
            vertical-align: middle;
            border: 0;
        }

        .active {
            color: #FFA129;
        }

        .text-center {
            text-align: center
        }


                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

html5手机web页面底部菜单

目前图片路径没有提供,此版本兼容各种型号手机,高度也是自适应,获取屏幕宽度再进行处理进行计算出来的

0