app 底部导航栏代码的实现

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%; }

index.html 

    
    
    
    
    
    
    



    

        

            
首页
            
我的发布
            
管理历史发布
            
我的资料
        
    
    

    
    

        

            
首页
            
发布
            
管理
            
我的