游戏页面 · APP模块

## 游戏页面说明：仿QQ游戏页面 ![](https://box.kancloud.cn/2016-08-25_57be8e307d087.png) 源代码如下： 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>  <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> ```