## 游戲頁面
說明：仿QQ游戲頁面
源代碼如下：
qq_game_win.html
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>QQ游戲社區</title>
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
.bg-white { background: #ffffff; }
.aui-bar { background: #12b7f5; }
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
<a class="aui-pull-left" tapmode onclick="closeWin()">
<i class="aui-iconfont aui-icon-left"></i>返回
</a>
<div class="aui-title">QQ游戲中心</div>
<a class="aui-pull-right">搜索</a>
</header>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
function closeWin(){
api.closeWin();
}
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
api.openFrame({
name: 'qq_game_frm',
url: 'qq_game_frm.html',
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: 'auto'
}
});
}
</script>
</html>
```
qq_game_frm.html
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>QQ游戲社區</title>
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../../css/aui-flex.css" />
<style type="text/css">
.aui-ellipsis-1 { padding: 0; margin: 0; }
.aui-btn {color: #333333; font-size: 14px; background: #fdfdfd; border: none;}
.bg-white { background: #ffffff; }
.aui-bar { background: #12b7f5; }
.corner { position: absolute; left: 0; top: 0; width: 15%; }
.corner img { width: 100% }
#banner { margin-bottom: 0; }
#banner img { width: 100%; display: block;}
#classify { padding: 10px 0 5px 0; margin-bottom: 10px;}
#classify img { width: 30%; }
#recommend { margin-bottom: 10px; position: relative;}
#recommend img.left-img { width: 100%; display: block;}
#recommend big { font-size: 18px; color: #333333;}
.title { font-size: 16px; color: #333333; }
.title span { font-size: 12px; color: #999999; }
.title span .aui-iconfont { font-size: 14px; color: #999999; }
#hot-list { position: relative; }
#hot-list img { width: 50%; display: block; margin: 0 auto 5px; }
#hot-list .aui-flex-item-4 { padding: 10px 5px; }
#hot-list big { font-size: 14px;}
#hot-list p { font-size: 12px;}
#hot-list .corner { left: -15px; width: 50%; }
#hot-list .aui-btn { margin-top: 5px; }
.all-game-btn { margin: 0 auto; padding: 2px 10px; font-size: 14px; color: #999999;}
.all-game-btn:after { border-radius: 30px; }
#good {}
#good img { width: 100%; }
#good-list > div{ position: relative; }
#good-list .good-title { position: absolute; left: 10px; top: 50%; margin-top: -15px; font-size: 14px; }
#good-box {}
.good-box-title { padding: 10px; background: url('image/good-4.jpg') no-repeat; background-position: right bottom; background-size: contain; background-color: #ffffff; font-size: 14px; }
#good-box .all-game-btn { color: #333333; display: inline; font-size: 12px; padding: 4px 8px; }
#good-box-list { background: #ffffff; padding: 10px 0 5px;}
#good-box-list img { width: 60%; }
#good-box-list big { font-size: 14px; }
#good-box-list p { font-size: 12px; margin: 0; }
#good-box-list > div { margin-bottom: 10px; }
#good-box-list .aui-flex-item-9 { padding-bottom: 10px; }
</style>
</head>
<body>
<!-- <header class="aui-bar aui-bar-nav">
<div class="aui-title">QQ游戲中心</div>
<a class="aui-pull-right">搜索</a>
</header> -->
<section class="aui-content" id="banner">
<img src="image/g-1.jpg" />
</section>
<section class="aui-flex-col aui-text-center bg-white" id="classify">
<div class="aui-flex-item-3">
<img src="image/classify-1.png" />
<p>新游</p>
</div>
<div class="aui-flex-item-3">
<img src="image/classify-2.png" />
<p>排行</p>
</div>
<div class="aui-flex-item-3">
<img src="image/classify-3.png" />
<p>分類</p>
</div>
<div class="aui-flex-item-3">
<img src="image/classify-4.png" />
<p>棋牌</p>
</div>
</section>
<section class="aui-flex-col bg-white" id="recommend">
<div class="corner"><img src="image/recommend.png" /></div>
<div class="aui-flex-item-4">
<img src="image/game-ren.png" class="left-img" />
</div>
<div class="aui-flex-item-5 aui-flex-row aui-flex-middle" >
<big>戰斗吧劍靈</big>
<p>近7日有65.4萬次下載</p>
</div>
<div class="aui-flex-item-3 aui-flex-row aui-flex-middle aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</section>
<section class="aui-content bg-white" id="hot">
<div class="title aui-border-b aui-padded-10">
熱游推薦
<span class="aui-pull-right">全部游戲 <i class="aui-iconfont aui-icon-right"></i></span>
</div>
<div class="aui-flex-col aui-border-b aui-text-center" id="hot-list">
<div class="aui-flex-item-4 aui-border-b">
<div class="corner"><img src="image/hot.png" /></div>
<img src="image/icon-1.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4 aui-border-l aui-border-b">
<div class="corner"><img src="image/hot.png" /></div>
<img src="image/icon-2.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4 aui-border-l aui-border-b">
<img src="image/icon-3.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4 aui-border-b">
<img src="image/icon-4.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4 aui-border-l aui-border-b">
<img src="image/icon-5.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4 aui-border-l aui-border-b">
<img src="image/icon-6.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4">
<img src="image/icon-7.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4 aui-border-l">
<img src="image/icon-8.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
<div class="aui-flex-item-4 aui-border-l">
<img src="image/icon-2.png" />
<big class="aui-ellipsis-1">戰斗吧精靈</big>
<p class="aui-ellipsis-1">劍靈正版卡牌手游</p>
<div class="aui-flex-col aui-flex-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
</div>
<div class="aui-flex-col aui-flex-center aui-padded-15 aui-text-center all-game">
<div class="all-game-btn aui-border">全部游戲<i class="aui-iconfont aui-icon-right"></i></div>
</div>
</section>
<section class="aui-content bg-white" id="good">
<div class="title aui-padded-10">
分類精選
<span class="aui-pull-right">全部分類 <i class="aui-iconfont aui-icon-right"></i></span>
</div>
<div class="aui-flex-col aui-padded-10" id="good-list">
<div class="aui-flex-item-4">
<div class="good-title aui-text-danger">站怒之國</div>
<img src="image/good-1.jpg" />
</div>
<div class="aui-flex-item-4">
<div class="good-title aui-text-info">瑯琊榜</div>
<img src="image/good-2.jpg" />
</div>
<div class="aui-flex-item-4">
<div class="good-title aui-text-primary">風暴大陸</div>
<img src="image/good-3.jpg" />
</div>
</div>
</section>
<section class="aui-content" id="good-box">
<div class="good-box-title aui-border-b">
軟妹妹都愛兵哥哥
<p><div class="all-game-btn aui-border">查看全部</div></p>
</div>
<div id="good-box-list">
<div class="aui-flex-col aui-flex-middle">
<div class="aui-flex-item-3 aui-text-center"><img src="image/icon-1.png" /></div>
<div class="aui-flex-item-9 aui-border-b">
<div class="aui-flex-item-8">
<big>穿越火線：槍王之戰</big>
<p>三億兄弟在等你</p>
</div>
<div class="aui-flex-item-4 aui-text-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
</div>
<div class="aui-flex-col aui-flex-middle">
<div class="aui-flex-item-3 aui-text-center"><img src="image/icon-3.png" /></div>
<div class="aui-flex-item-9 aui-border-b">
<div class="aui-flex-item-8">
<big>全民突擊</big>
<p>全民激情射擊游戲</p>
</div>
<div class="aui-flex-item-4 aui-text-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
</div>
<div class="aui-flex-col aui-flex-middle">
<div class="aui-flex-item-3 aui-text-center"><img src="image/icon-4.png" /></div>
<div class="aui-flex-item-9 aui-border-b">
<div class="aui-flex-item-8">
<big>星河戰神</big>
<p>3D對戰飛行射擊</p>
</div>
<div class="aui-flex-item-4 aui-text-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
</div>
<div class="aui-flex-col aui-flex-middle">
<div class="aui-flex-item-3 aui-text-center"><img src="image/icon-5.png" /></div>
<div class="aui-flex-item-9">
<div class="aui-flex-item-8">
<big>戰斗吧劍靈</big>
<p>劍靈正版卡牌手游</p>
</div>
<div class="aui-flex-item-4 aui-text-center">
<div class="aui-btn aui-border aui-border-radius">進入</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
```
- APP模塊
- 歡迎頁
- 頭部模塊
- 底部模塊
- 圖文列表
- 商品展示
- 文字列表
- 內容頁一
- 評論頁
- N宮格
- 獲得上一級的欄目名稱
- 搜索模塊
- 圖標
- 幻燈模塊
- 消息頁
- 個人中心
- 個人中心—我的收藏
- 個人中心—資料修改
- 個人中心—我的錢包（賬戶）
- 咨詢頁面
- APP模板
- 注冊 頁面一
- 注冊 頁面二
- 登錄 頁面一
- 登錄 頁面二
- 忘記密碼 頁面一
- 會員中心 首頁一
- 會員中心 首頁二
- 會員中心 首頁三
- 會員中心 資料修改
- 申請審核步驟
- 商品訂單一
- 游戲頁面
- 新聞列表頁
- 圖文列表頁
- 商品列表頁
- 商品詳情頁
- 聊天
- 消息列表
- 聊天界面
- 發布需求
- 前端框架
- CSS Framework
- trim 字符處理
- dom 選擇器
- 樣式
- evt 事件
- 選擇元素
- 屬性
- 文本
- 位置
- json
- 設置
- 提示
- AJAX
- storage 本地存儲
- API對象
- 常用函數
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用圖片
- asd