手機html開發，簡單例項，頭部底部固定，中間可以滾動
阿新 • • 發佈：2019-02-07
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--
inital-scale表示的初始的縮放比例.1.0倍
user-scalable=no表示是否支援使用者手動進行縮放
表示的是當啟動webapp功能時，顯示手機訊號、時間、電池的頂部導航欄的顏色。預設值為default（白色），
可以定為black（黑色）和black-translucent（灰色半透明）
-->
<title></title>
<style type="text/css">
html,body,.page{width:100%; height:100%;overflow:hidden;}
.top,.con,.bottom{position:absolute; left:0; right:0;}
body{
width:100%;
max-width:640px;
margin:0 auto;
top:0px; bottom:0px; left:0px; right:0px;
min-width:320px;
}
.top{
top:0;z-index:1; height:30px;background:#ff0;
height: 78px;
text-align: center;
width: 100%;
max-width: 640px;
background: #1b1b1b;
position: absolute;
z-index: 2;
}
select{
width: 100px;
line-height: 230%;
}
.con_c{
margin-top:15px;
width: 100%;
max-width: 640px;
min-width: 320px;
min-height: 400px;
margin-top: 0%;
display: block;
border-bottom: 1px solid #c9c9c9;
}
.con{top:78px; bottom:78px; overflow:auto;}
.bottom{bottom:0;z-index:1; height:40px;
color: #fff;
position: absolute;
height: 78px;
width: 100%;
max-width: 640px;
margin-top: 0%;
background-color: black;
text-align: center;
}
</style>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div class="wrap">
<div class="top">
<form action="" method="post" style="padding-top: 27px;">
<label>：</label>
<select id="mapSelect" onchange="mapcheck()">
<option value="1"></option>
<option value="2"></option>
</select>
<label>：</label>
<select id="menuSelect" onchange="check()">
<option value="1"></option>
<option value="2"></option>
</select>
</form>
</div>
<div class="con">
<!------------內容一項開始------------->
<div class="con_c" id="menu1">
</div>
<div style="clear:both;"></div>
<!---------------------內容一項結束------------------------->
<!------------內容一項開始------------->
<div class="con_c" id="menu2">
</div>
<div style="clear:both;"></div>
<!---------------------內容一項結束------------------------->
</div>
<div class="bottom"></div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function check(){
var myselect=document.getElementById("menuSelect");
var index=myselect.selectedIndex ;
var va=myselect.options[index].value;
if(va == "2"){
window.location.href="xxx.html";
}
}
function mapcheck(){
var myselect=document.getElementById("mapSelect");
var index=myselect.selectedIndex ;
var va=myselect.options[index].value;
if(va == "2"){
window.location.href="xxx.html";
}
}
</script>
<!-- <script type="text/javascript" src="js/menu.js"></script>
--></body>
</html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--
inital-scale表示的初始的縮放比例.1.0倍
user-scalable=no表示是否支援使用者手動進行縮放
表示的是當啟動webapp功能時，顯示手機訊號、時間、電池的頂部導航欄的顏色。預設值為default（白色），
可以定為black（黑色）和black-translucent（灰色半透明）
-->
<title></title>
<style type="text/css">
html,body,.page{width:100%; height:100%;overflow:hidden;}
.top,.con,.bottom{position:absolute; left:0; right:0;}
body{
width:100%;
max-width:640px;
margin:0 auto;
top:0px; bottom:0px; left:0px; right:0px;
min-width:320px;
}
.top{
top:0;z-index:1; height:30px;background:#ff0;
height: 78px;
text-align: center;
width: 100%;
max-width: 640px;
background: #1b1b1b;
position: absolute;
z-index: 2;
}
select{
width: 100px;
line-height: 230%;
}
.con_c{
margin-top:15px;
width: 100%;
max-width: 640px;
min-width: 320px;
min-height: 400px;
margin-top: 0%;
display: block;
border-bottom: 1px solid #c9c9c9;
}
.con{top:78px; bottom:78px; overflow:auto;}
.bottom{bottom:0;z-index:1; height:40px;
color: #fff;
position: absolute;
height: 78px;
width: 100%;
max-width: 640px;
margin-top: 0%;
background-color: black;
text-align: center;
}
</style>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div class="wrap">
<div class="top">
<form action="" method="post" style="padding-top: 27px;">
<label>：</label>
<select id="mapSelect" onchange="mapcheck()">
<option value="1"></option>
<option value="2"></option>
</select>
<label>：</label>
<select id="menuSelect" onchange="check()">
<option value="1"></option>
<option value="2"></option>
</select>
</form>
</div>
<div class="con">
<!------------內容一項開始------------->
<div class="con_c" id="menu1">
</div>
<div style="clear:both;"></div>
<!---------------------內容一項結束------------------------->
<!------------內容一項開始------------->
<div class="con_c" id="menu2">
</div>
<div style="clear:both;"></div>
<!---------------------內容一項結束------------------------->
</div>
<div class="bottom"></div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function check(){
var myselect=document.getElementById("menuSelect");
var index=myselect.selectedIndex ;
var va=myselect.options[index].value;
if(va == "2"){
window.location.href="xxx.html";
}
}
function mapcheck(){
var myselect=document.getElementById("mapSelect");
var index=myselect.selectedIndex ;
var va=myselect.options[index].value;
if(va == "2"){
window.location.href="xxx.html";
}
}
</script>
<!-- <script type="text/javascript" src="js/menu.js"></script>
--></body>
</html>