-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (83 loc) · 3.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<title>phaser引擎实战</title>
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
/>
<meta name="renderer" content="webkit"/>
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='full-screen' content='true' />
<meta name='x5-fullscreen' content='true' />
<meta name='360-fullscreen' content='true' />
<meta name="laya" screenorientation ="landscape"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv='expires' content='0' />
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="shortcut icon" href="./src/assets/favicon.png?v=1.0" />
<meta name=keywords content="phaser,h5游戏,大球吃小球,大鱼吃小鱼,弱肉强食" />
<meta name=description content="h5游戏引擎phaser学习实战，微信小游戏开发" />
<style>
html,body{
height: 100%;
margin: 0;
padding: 0;
color: #fff;
background: #373d41;
}
ul,li,dl,dt,dd{padding: 0;margin: 0;list-style: none;}
a{color:rgb(210, 169, 248);text-decoration: none;}
.wrap{text-align: center;max-width: 600px;margin: 0 auto;height: 100%;
background:#373d41 url("./src/assets/bg.png") no-repeat;
background-position:center top;
background-size: 100%;
}
.logo{text-align: center;padding: 60px 15px 30px;}
.h1{font-size: 26px;font-weight: normal;text-align: center}
.btn{
background: -webkit-linear-gradient(left top, #4FC1E9, #0BD07A);/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #4FC1E9, #0BD07A);/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #4FC1E9, #0BD07A);/* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #4FC1E9, #0BD07A);/* 标准的语法 */
color: #ffffff;
}
.gamelist{padding: 30px;}
.gamelist a{display: block;padding: 15px 30px;border-radius: 50px;}
.game-dl{padding: 30px;text-align: left;}
.game-dl dl{display: flex;padding: 10px;position: relative;background: #303335;border-radius: 5px;}
.game-dl dt{width: 30%;}
.game-dl dt img{display: block}
.game-dl dd{width: 70%;padding-left: 15px;}
.game-dl dd h2{margin: 0;font-size: 16px;color: #0BD07A}
.game-dl dd p{font-size: 12px;margin: 10px 0;color: #ccc}
.info{text-align: right;color: #999;padding: 0 60px;font-size: 12px;}
.hide{display: none;}
@media screen and (min-width: 420px){
.logo{padding: 70px 15px 50px;}
}
</style>
</head>
<body>
<div class="wrap">
<div class="logo"><img src="./src/assets/logo.png?v=1.0" width="42%" alt="phaser logo"></div>
<h1 class="h1">phaser引擎实战</h1>
<p class="info">——by 沐峰</p>
<div class="game-dl">
<a href="./src/index.html">
<dl>
<dt><img width="100%" src="./src/assets/ball.png?v=1.0" alt="ball"></dt>
<dd>
<h2>大球吃小球</h2>
<p>
玩法：模仿大鱼吃小鱼，吃掉比自己小的球...
</p>
</dd>
</dl>
</a>
</div>
<ul class="gamelist">
<a class="btn" href="javascript:alert('微信小游戏开发中，敬请期待！')">撞球开发中...</a>
</ul>
</div>
</body>
</html>