1. 程式人生 > >手機html開發,簡單例項,頭部底部固定,中間可以滾動

手機html開發,簡單例項,頭部底部固定,中間可以滾動

<!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>