手机站开发基本模版

************************************HTML*************************************

<!DOCTYPE html>

<html>
<head>
<title>test</title>
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<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, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<header>Top</header>
<article>
<li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>Z</li><li>H</li><li>R</li><li>E</li><li>W</li><li>Q</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li>
<li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>G</li><li>H</li>
<li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>Z</li><li>H</li><li>R</li><li>E</li><li>W</li><li>Q</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li>
<li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>G</li><li>H</li>
<li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>Z</li><li>H</li><li>R</li><li>E</li><li>W</li><li>Q</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li>
<li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>G</li><li>H</li>
<li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>Z</li><li>H</li><li>R</li><li>E</li><li>W</li><li>Q</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li>
<li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>G</li><li>H</li>
<li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>Z</li><li>H</li><li>R</li><li>E</li><li>W</li><li>Q</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li>
<li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>J</li><li>M</li><li>M</li><li>A</li><li>V</li><li>C</li><li>X</li><li>G</li><li>H</li>
</article>
<footer>Bottom</footer>
</body>
</html>

************************************样式********************************************

@charset "utf-8";
/* CSS Document */

::-webkit-scrollbar{width:0;height:0}

ul, li, a, p, span, div, dl, dt, dd, strong, big, em, view, img, image, article,

footer, body, html, page, textarea, input, radio, center {

box-sizing: border-box;

display:block;

-moz-box-sizing: border-box; /* Firefox */

-webkit-box-sizing: border-box; /* Safari */

margin: 0;

padding: 0;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

-webkit-focus-ring-color: rgba(0, 0, 0, 0);

-moz-tap-highlight-color: rgba(0, 0, 0, 0);

-moz-focus-ring-color: rgba(0, 0, 0, 0);

}

em{font-style: normal;}
center{text-align: center;}
strong{font-weight: bold;}
p{display:block;}
img{ border:0 }
view{display:block;}
li{ list-style:none}
big{font-size:1.5em;}
.position_a{position: absolute;}
.position_r{position:relative;}
a{color:#000; text-decoration:none }
.position_a{position:absolute;}
.position_r{position:relative;}
.position_f{position:fixed;}
.block{display: block;}
.text_c{text-align: center;}
.text_r{text-align: right;}
.c::after{display:table;content:" ";clear:both}
.fl{float:left;}
.fr{float:right;}
.h0{height:0;overflow:hidden;}
.o_ell{ overflow:hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis; }
html,body { font-size:14px;display: -webkit-box;display: -moz-box;display: box;display: -ms-flexbox;-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-box-orient: vertical;box-orient: vertical;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: flex;-webkit-flex-direction: column;/*row 水平*/-moz-flex-direction: column;/*row 水平*/-ms-flex-direction: column;/*row 水平*/flex-direction: column;/*row 水平*/height: 100%;width: 100%;}
header,footer {text-align:center;width:100%;}
article {-webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1;-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex:1;background: #fff;color:#000;overflow-x: hidden;overflow-y: auto;touch-action: pan-y;-webkit-overflow-scrolling: touch;}
input,select,textarea{outline:none;font-family:'微软雅黑'}

/* Center slide text vertically */

.center{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

}

@charset "utf-8";
/* CSS Document */

::-webkit-scrollbar{width:0;height:0}

ul, li, a, p, span, div, dl, dt, dd, strong, big, em, view, img, image, article,

footer, body, html, page, textarea, input, radio, center {

box-sizing: border-box;

display:block;

-moz-box-sizing: border-box; /* Firefox */

-webkit-box-sizing: border-box; /* Safari */

margin: 0;

padding: 0;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

-webkit-focus-ring-color: rgba(0, 0, 0, 0);

-moz-tap-highlight-color: rgba(0, 0, 0, 0);

-moz-focus-ring-color: rgba(0, 0, 0, 0);

}

em{font-style: normal;}
center{text-align: center;}
strong{font-weight: bold;}
p{display:block;}
img{ border:0 }
view{display:block;}
li{ list-style:none}
big{font-size:1.5em;}
.position_a{position: absolute;}
.position_r{position:relative;}
a{color:#000; text-decoration:none }
.position_a{position:absolute;}
.position_r{position:relative;}
.position_f{position:fixed;}
.block{display: block;}
.text_c{text-align: center;}
.text_r{text-align: right;}
.c{clear:both}
.fl{float:left;}
.fr{float:right;}
.h0{height:0;overflow:hidden;}
.o_ell{ overflow:hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis; }
html,body { font-size:14px;display: -webkit-box;display: -moz-box;display: box;display: -ms-flexbox;-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-box-orient: vertical;box-orient: vertical;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: flex;-webkit-flex-direction: column;/*row 水平*/-moz-flex-direction: column;/*row 水平*/-ms-flex-direction: column;/*row 水平*/flex-direction: column;/*row 水平*/height: 100%;width: 100%;}
header,footer {text-align:center;width:100%;}
article {-webkit-box-flex: 1;-moz-box-flex: 1;-ms-box-flex: 1;box-flex: 1;-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex:1;background: #fff;color:#000;overflow-x: hidden;overflow-y: auto;touch-action: pan-y;-webkit-overflow-scrolling: touch;}
input,select,textarea{outline:none;font-family:'微软雅黑'}

/*animate*/
.animated{animation-name:bounce;animation-duration:2s;animation-timing-function:linear;animation-delay:2s;/*延迟几秒（-为跳过几秒）*/animation-iteration-count:3;animation-direction:alternate;}

@-webkit-keyframes bounce{}
@keyframes bounce{}
.bounce{-webkit-animation-name:bounce;animation-name:bounce;}
/*animate*/

.none{-webkit-appearance:none }

******************************************************************************************************

$(this).removeClass().addClass('bounce).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();

data-ignore="True" 原生跳转

posted @ 2015-05-01 13:21 mrt_yy 阅读(465) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

mrt_yy

手机站开发基本模版

公告