您的位置：首页 > Web前端 > HTML

手机html开发，简单实例，头部底部固定，中间可以滚动

2017-04-06 11:17 537 查看
直接贴出html代码，桌面新建html，拷贝进去就能使用(为方便使用，css写在一起。)/***********************************star***********************************************/<!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>/***************************************************end**************************************************//***以下是以前在百度上找的别人写的解释：**/ 移动端前端制作有些地方不同于互联网，这篇主要讨论的是meta标签。meta标签位于之间。是主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。这里只讨论移动端。附上代码进行说明：<!DOCTYPE html><!--HTML5 doctype--><html><head><title>xxx</title><meta http-equiv="Content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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" />   这是一个HTML5为语言标准的说明文档。第一组meta标签，大家比较常见。这个是经常用到的。它表明的意思是它的内容是html文档，且网页编码采用的是utf-8编码。utf-8编码主要针对是简体中文和英文。正确的编码定义很有必要。否则会导致网页上的文字变成乱码。   第二组meta标签就是移动端特属的标签了。它表明的意思是它是一个视图窗口。其视图窗口内容的宽度等于移动端设备的默认宽度。inital-scale表示的初始的缩放比例.一般设置为1.0倍。maximum-scale=1.0表示的允许用户缩放的最大比例。
user-scalable=no表示是否支持用户手动进行缩放。

   第三组和第四组meta标签都是针对IOS系统的专属标签。第三组meta标签表示的意思是是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。

   第四组meta标签表示的是当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。
认为帮助到自己的，可以打赏小编

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                手机
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航