<!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>
</script>
<style>
body, html {
100%;
height: 100%;
background: rgb(242,242,242);
font-size:14px;
}
header {
100%;
height: 44px;
line-height: 44px;
font-size: 16px;
text-align: center;
font-weight: bold;
color: rgb(51,51,51);
background: #ffffff;
}
.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;
}
.csno-bod:before,
.csno-bod:after{
height: 0;
}
.border-b:after {
top: auto;
bottom: 0;
}
.border-b-1 {
position: relative;
}
.border-b-1: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-1:after {
top: auto;
bottom: -1px;
}
#wrap {
height: 100%;
}
body {
max- 750px;
background: rgb(242, 242, 242);
100%;
margin: 0 auto;
}
.box-shadow {
-moz-box-shadow: 0px 3px 8px rgba(201, 201, 201, 0.5);
-webkit-box-shadow: 0px 3px 8px rgba(201, 201, 201, 0.5);
box-shadow: 0px 3px 8px rgba(201, 201, 201, 0.5);
}
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c_header_item {
position: relative;
display: none;
}
.c_header_item.active {
display: block;
}
.c_msg {
position: absolute;
44px;
height: 44px;
top: 0;
right: 0;
background: url(image/home/ic_msg.png) no-repeat center;
background-size: 20px;
}
.c_msg_new {
position: absolute;
6px;
height: 6px;
top: 15px;
right: 15px;
background: red;
border-radius: 3px;
display: none;
}
.c_search {
position: absolute;
32px;
height: 44px;
top: 0;
right: 37px;
background: url(image/event/ic_event_search.png) no-repeat center;
background-size: 20px;
}
.c_filter {
position: absolute;
32px;
height: 44px;
top: 0;
right: 5px;
background: url(image/event/ic_event_filter.png) no-repeat center;
background-size: 20px;
}
footer {
100%;
height: 50px;
padding-top: 1px;
padding-bottom: 4px;
box-sizing: border-box;
background: #FFF;
}
.c_home_icon {
100%;
height: 30px;
background: url(image/home/home_normal.png) no-repeat center;
background-size: 30px;
}
.c_event_icon {
100%;
height: 30px;
background: url(image/home/event_normal.png) no-repeat center;
background-size: 30px;
}
.c_mine_icon {
100%;
height: 30px;
background: url(image/home/mine_normal.png) no-repeat center;
background-size: 30px;
}
.c_home_icon.active {
100%;
height: 30px;
background: url(image/home/home_highlight.png) no-repeat center;
background-size: 30px;
}
.c_event_icon.active {
100%;
height: 30px;
background: url(image/home/event_highlight.png) no-repeat center;
background-size: 30px;
}
.c_mine_icon.active {
100%;
height: 30px;
background: url(image/home/mine_highlight.png) no-repeat center;
background-size: 30px;
}
.c_page_text {
100%;
height: 12px;
margin-top: 3px;
line-height: 12px;
font-size: 12px;
text-align: center;
color: #9c9c9c;
}
.c_page_text.active {
color: #14dcac;
}
</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
<header class="box-shadow">
<div class="c_header_item active">
首页 <div class="c_msg" ></div>
<div class="c_msg_new"></div>
</div>
<div class="c_header_item border-b">
分类 <div class="c_search" ></div>
<div class="c_filter" ></div>
</div>
<div class="c_header_item">
个人中心
</div>
</header>
<div id="main" class="flex-con"></div>
<footer class="border-t flex-wrap">
<div class="c_footer_item flex-con" >
<div class="c_page_icon c_home_icon active"></div>
<div class="c_page_text active">
首页
</div>
</div>
<div class="c_footer_item flex-con">
<div class="c_page_icon c_event_icon"></div>
<div class="c_page_text">
分类
</div>
</div>
<div class="c_footer_item flex-con" >
<div class="c_page_icon c_mine_icon"></div>
<div class="c_page_text">
我的
</div>
</div>
</footer>
</div>
</body>
</html>
在开发项目的时候有时会遇到移动webapp，虽然感觉布局很简单，但是通常底部导航都是使用定位来实现，如果使用到输入框的时候就会遇到键盘顶起底部导航的情况，为了防止出现类似情况，可以使用flex布局实现页面布局