H5页⾯开发之页⾯基本结构布局
H5页⾯主要借助HTML5技术（例如CSS3媒体查询、CSS3动画、Canvas等），将图、⽂、动画、视频、⾳频等媒体形式进⾏合理组合，常⽤于邀请函、⼩游戏、品牌展⽰、抽奖等，主要在移动社交环境如中传播。
单页Web应⽤（SPA）的模式是H5页⾯最常⽤的⼀种模式，整个H5页⾯只需要单个HTML ⽂件，通常浏览器⼀开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这个HTML上，通过JavaScript控制DOM操作来完成。
在下⾯的结构中，核⼼原理是，每⼀个包含page类名的DOM元素为⼀个可见的页⾯，通过控制不同的page元素，来实现对页⾯的进场出场的控制。本⽂只列出来⼀个简单的HTML结构，和部分的css，当然如果想实现炫酷的效果和丰富的交互，还需要很多其他的模块，例如预加载、⾳频视频处理的JS。
PS:⼯作中的⼀些H5不⽅便公开，想着单独做作品放在博客⾥，寻好的⽅案和设计。。。
html⽂件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">canvas动画
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
<meta name="apple-mobile-web-app-capable"content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="full-screen"content="true" />
<meta name="screen-orientation"content="portrait" />
<meta name="x5-fullscreen"content="true" />
<meta name="360-fullscreen"content="true" />
<title>基本结构</title>
<link href="css/common.css"rel="stylesheet" />
<link href="css/index.css"rel="stylesheet" />
<script>
// 统计代码
</script>
</head>
<body>
<!-- 如果是在⾥运⾏，在页⾯的最上⽅放⼀张隐藏的图⽚，作为默认的分享图⽚ -->
<div >
<img src="7xlzdr2.z0.glb.qiniucdn/img/share.jpg">
</div>
<div class="page cssloader ">
<div class="loader-inner ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- loading -->
<div class="page p0">
<img src="img/loading_m_colorful.gif"alt=""class="p0-loading">
<p class="p0-process">0</p>
</div>
<!-- 第1页 -->
<div class="page p1 ">
<div class="content">
<img src="img/niubi.jpg"alt=""class="p1-aimg">
<div class="btn-common p1-btn-alert btn-touchable">弹框</div>
<div class="btn-common btn-next ">下⼀页</div>
css⽂件
<div class="btn-common btn-next ">下⼀页</div> <div class="btn-common btn-prev ">上⼀页</div> </div>
</div>
<!-- 第2页 -->
<div class="page p2 ">
<img src="img/niubi.jpg"alt=""class="p2-aimg">
<div class="btn-common p2-btn-alert btn-touchable">弹框</div>
<div class="btn-common btn-next btn-touchable">下⼀页</div>
<div class="btn-common btn-prev btn-touchable">上⼀页</div>
</div>
<!-- 第3页 -->
<div class="page p3 ">
<div class="btn-common p3-btn-alert btn-touchable">分享</div>
<div class="btn-common btn-next btn-touchable">下⼀页</div>
<div class="btn-common btn-prev btn-touchable">上⼀页</div>
</div>
<!-- 第4页 -->
<div class="dialog1 dialog">
<div class="dialog1-box">
<img src="img/alert1.png"alt=""class="dialog1-bg">
<div class="btn-common dialog1-btn-get btn-touchable">点击使⽤</div> </div>
</div>
<!-- 第5页 -->
<div class="dialog2 dialog ">
<div class="dialog2-box">
<img src="img/alert2.png"alt=""class="dialog2-bg">
<div class="btn-common dialog2-btn-ok btn-touchable">确认</div>
</div>
</div>
<!-- 第6页 -->
<div class="dialog0 dialog ">
<img src="img/sharehint.png"alt=""class="dialog0-hint">
</div>
<script>
var app = app || {
currentPage: 0,
pages: {},
dialogs:{},
common: {}
};
</script>
<script type="text/javascript">
</script>
</body>
</html>
@charset"utf-8";
html {
font-size: 10px
}
body {
width: 100%;
height: 100%;
position: absolute;
background:#fff;
}
/*********************************************************/ .dialog,
.page {
width: 100%;
max-width: 600px;
height: 100%;
display: none;
position: absolute;
top: 0;
right: 0;
left: 0;
overflow: hidden;
}
.dialog {
background:rgba(0, 0, 0, 0.8);
z-index: 9999;
}
.content {
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:translate3d(-50%, -50%, 0); transform:translate3d(-50%, -50%, 0);
outline: 1px solid red;
}
.btn-common {
background:rgba(0, 0, 0, 0.6);
position: absolute;
width: 8rem;
height: 3.5rem;
line-height: 3.5rem;
font-size: 1.8rem;
color:#fff;
text-align: center;
}
.btn-next {
bottom: 1rem;
right: 1rem;
}
.btn-prev {
bottom: 1rem;
left: 1rem;
}
.uched {
background:rgba(0, 0, 0, 0.3);
margin-bottom: -2px;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论