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

H5页面开发之页面基本结构布局

2016-07-28 16:23 483 查看

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">
<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 style="display:none;">
<img src="http://7xlzdr.com2.z0.glb.qiniucdn.com/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>
<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>

css文件

@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;
}

.btn-touchable.touched {
background: rgba(0, 0, 0, 0.3);
margin-bottom: -2px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html5 h5 spa 单页面应用

相关文章推荐

新的分享

章节导航