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文件


<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>


<div class="page p0">
  <img src="img/loading_m_colorful.gif" alt="" class="p0-loading">
  <p class="p0-process">0p>
div>


<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>


<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>


<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>


<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>


<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>


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

你可能感兴趣的:(H5页面开发之页面基本结构布局)