直接贴出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;
<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;