ApiCloud框架 - 码农教程

一、通用底部菜单和顶部菜单布局

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2; }
        #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #6ab494; }
        #footer ul li:nth-child(1){ background-image: url(./image/bottombtn0101.png); }
        #footer ul li:nth-child(2){ background-image: url(./image/bottombtn0201.png); }
        #footer ul li:nth-child(3){ background-image: url(./image/bottombtn0301.png); }
        #footer ul li:nth-child(4){ background-image: url(./image/bottombtn0401.png); }
        #footer ul li:nth-child(1).active{ background-image: url(./image/bottombtn0102.png); }
        #footer ul li:nth-child(2).active{ background-image: url(./image/bottombtn0202.png); }
        #footer ul li:nth-child(3).active{ background-image: url(./image/bottombtn0302.png); }
        #footer ul li:nth-child(4).active{ background-image: url(./image/bottombtn0402.png); }
        .flex-con{
          overflow: auto
        }
        /*api.css*/
        html{
            font-family: sans-serif;
        }
        html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p{
            margin:0;
            border:0;
            padding:0;
            font-style:normal;
        }
        html,body {
            -webkit-touch-callout:none;
            -webkit-text-size-adjust:none;
            -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
            -webkit-user-select:none;
            background-color: #fff;
        }
        nav,article,aside,details,main,header,footer,section,fieldset,figcaption,figure{
            display: block;
        }
        img,a,button,em,del,strong,var,label,cite,small,time,mark,code,textarea{
            display:inline-block;
        }
        header,section,footer {
            position:relative;
        }
        ol,ul{
            list-style:none;
        }
        input,button,textarea {
            border:0;
            margin:0;
            padding:0;
            font-size:1em;
            line-height:1em;
            /*-webkit-appearance:none;*/
            background-color:rgba(0, 0, 0, 0);
        }
        span{
            display:inline-block;
        }
        a:active, a:hover {
          outline: 0;
        }
        a, a:visited{
            text-decoration:none;
        }

        label, .wordWrap{
            word-wrap: break-word;
            word-break: break-all;
        }
        table {
          border-collapse: collapse;
          border-spacing: 0;
        }
        td,th {
          padding: 0;
        }
        .clearfix:after{
            content: ' ';
            display: block;
            clear: both;
            visibility:hidden;
            line-height: 0;
            height:0;
        }
        .loading_more{
            display: block;
            height: 1.5em;
            width: 100%;
        }
        .loading_more:before {
            display: inline-block; vertical-align: text-bottom;
            content: ' '; height: 16px; width: 16px; margin-right: 6px;
            background: url(../image/loading_more.gif) no-repeat center;
            -webkit-background-size: contain;
            background-size: contain;
        } 
        .loading_more:after {
            content: '加载更多';    
        }
        /*style.css*/
        html,body {  font-size:14px; height:100%;  }
        .hover{ opacity: .8; }

        .flex-wrap{ display: -webkit-box;   display: -webkit-flex;  display: flex; }
        .flex-con{     -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1;}
        .flex-vertical{ -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}

        .border-t,
        .border-b{ position:relative;  }
        .border-t:before,
        .border-b:after{     content: '';     position: absolute;     left: 0;  top:0;     background: #ddd;   right:0;    height: 1px;     -webkit-transform: scaleY(0.5);             transform: scaleY(0.5);     -webkit-transform-origin: 0 0;             transform-origin: 0 0; }
        .border-b:after{ top:auto; bottom:0;  }

        #wrap{ height: 100%; }
    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
        <ul>
            <li class="border-b active" >云API</li>
            <li class="border-b" >端API</li>
            <li class="border-b" >开发</li>
            <li class="border-b" >文档</li>
        </ul>
    </header>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >云API</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >端API</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >开发</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >文档</li>
        </ul>
    </div>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if( tag == $('#footer li.active') )return;
        var eFootLis =$('#footer').find('li'),
            eHeaderLis =$('header').find('li'),
            index = 0;
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                index = i;
            }else{
                $(eFootLis[i]).removeClass("active");
                $(eHeaderLis[i]).removeClass("active");
            }
        }
        $(eFootLis[index]).addClass('active');
        $(eHeaderLis[index]).addClass('active');
    }
</script>
原文地址：https://www.cnblogs.com/fger/p/11771839.html