项目实战（一）HTML5+CSS3+JS完成前端网站的制作_用html5+css3实现如下网页前端

作者：菜鸟追梦旅行 | 2024-02-29 17:21:08

踩

用html5+css3实现如下网页前端

css样式：

*{
	padding:0;
	margin:0;
	box-sizing: border-box;
}
html,body{
	font-family: 'segoe UI',Tahoma,Geneva,verdana,sans-serif;
	line-height: 1.7em;
}
a{
	color: #333;
	text-decoration: none;
}
h1,h2,h3{
	padding-bottom: 20px;
}
p{
	margin: 10px 0;
}
.container{
	margin:0 auto;
	max-width: 1100px;
	overflow: hidden;
	padding: 0 20px;
}
.text-primary{
	color: #f7c08a;
}
.bg-dark{
	background: #444;
	color: #fff;
}
.clr{
	clear: both;
}
.py{
	padding: 10px 0;
}
.l-heading{
	font-size: 40px;
	padding-top: 20px;
}
#navber{
	background: #333;
	color: #fff;
	overflow: auto;
}
#navber a{
	color: #fff;
}
#navber h1{
	float: left;
	padding-top: 20px;
}
#navber ul{
	float: right;
	list-style: none;
}
#navber ul li{
	float: left;
}
#navber ul li a{
	display: block;
	padding: 20px;
	text-align: center;
}
#navber ul li a:hover,
#navber ul li a.current{
	background: #444;
	color: #f7c08a;
}
#showcase{
	background: url('../img/1.jpg') no-repeat center center/cover;
	height: 600px;
}
#showcase .showcase-content{
	color: #fff;
	text-align: center;
	padding-top: 170px;
}
#showcase .showcase-content h1{
	font-size:60px;
	line-height: 1.2em;
}
#showcase .showcase-content p{
	font-size:20px;
	line-height: 1.7em; 
	padding-bottom: 20px;

}
.btn{
	display: inline-block;
	font-size:18px;
	color: #fff;
	background: #333;
	padding: 13px 20px;
	border:none; 
}
.btn:hover{
	background: #f7c08a;
}
.btn-light{
	background: #f4f4f4;
	color: #333;    
}

#home-info{
	height: 400px;
}
#home-info .info-img{
	float: left;
	width: 50%;
	background: url('../img/2.jpg') no-repeat center center/cover;
	height: 100%;
}
#home-info .info-content{
	float: right;
	width: 50%;
	text-align: center;
	height: 100%;
	padding: 50px 30px;
	overflow: hidden;
}
#home-info .info-content p{
	padding-bottom: 30px; 
}

.box{
	float: left;
	width: 33.3%;
	padding: 50px;
	text-align: center;
}
.box i{
	margin-bottom: 10px;
}
.bg-light{
	background: #f4f4f4;
	color: #333;
}
.bg-primary{
	background: #f7c08a;
	color: #333;
}
#about-info .info-left{
	float: left;
	width: 50%;
	height: 100%;
}
#about-info .info-right{
	float: right;
	width: 50%;
	height:100;
}
#about-info .info-right img{
	display: block;
	width: 80%;
	margin: 0 auto;
	border-radius: 50%;

}

#testimonials{
	height: 600px;
	background: url('../img/6.jpg')  no-repeat center center/cover;
	padding-top: 100px;

}
#testimonials h2{
	color: #fff;
	text-align:  center;
	padding-bottom: 40px;
}
#testimonials .testimonial{
	padding: 20px;
	margin-bottom: 40px;
	border-radius: 5px;
	opacity: 0.9;
}
#testimonials .testimonial img{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	float: left;
	margin-right: 20px;
}
#contact-form .form-group{
	margin-right: 20px;
}
#contact-form label{
	display: block;
	margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea{
	width: 100%;
	padding: 10px;
	border: 1px #ddd solid;
}
#contact-form textarea{
	height: 200px;
}
#contact-form input,
#contact-form textarea:focus{
	outline: none;
	border-color: #f7c08a;
}
#main-footer{
	text-align: center;
	background: #333;
	color: #fff;
	padding:20px;
}
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

制作首页HTML框架：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="X-UA-Compatible" content="ie=edg">
	<meta name ="description" content="欢迎来到德云社">
	<meta name="keywords" content="413德云社">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<title>德云社|首页</title>
</head>
<body>
	<header>
		<nav id="navber">
			<div class="container">
				<h1><a href="index.html">德云社</a></h1>
				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a href="about.html">关于我们</a></li>
					<li><a href="album.html">我们的回忆</a></li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</nav>
		<div id="showcase">
			<div class="container">
				<div class="showcase-content">
					<h1>欢迎来到<span class="text-primary"> 德云社</span> </h1>
					<p>德云社，带给你的欢乐无限。欢迎您的到来！</p>
					<a class="btn" href="about.html">关于我们</a>
					
				</div>
				
			</div>
			
		</div>
	</header>
	<section id="home-info" class="bg-dark">
		<div class="info-img"></div>
		<div class="info-content">
			<h2><span class="text-primary">德云社</span> 介绍</h2>
			<p>"德云社"是以弘扬中华民族文化、培养曲艺人才、服务大众为主旨的曲艺演出团体。社团最初由著名相声演员刘洋、汤东霖、臧传奇、吴超群于1995年创建，经历了二十五年的风雨历程走到今日实属艰辛，然值得欣慰的是经过哈源先生和众多位新老相声演员的不懈努力，德云社正在逐步走向辉煌。德云社所属的"江苏相声大会"每周都在江苏农林职业技术学院等地演出五、六场。取得这么大的成功都是因为有郭老师的指导帮助。<br /></p>
			<a class="btn btn-light" href="about.html">阅读更多</a>
		</div>
	</section>
	<section id="features">
		<div class="box bg-light">
			<i class="fa fa-users fa-3x"></i>
			<h3>成员介绍</h3>
			<p>德云社演员：<br /> 汤小脸，刘野鸡，哈萨K，超群 <br /> 一刀999，郭班主</p>
		</div>
		<div class="box bg-primary">
			<i class="fa fa-handshake-o fa-3x"></i>
			<h3>商务合作</h3>
			<p>关于相声表演 <br />关于校园演出 <br />关于喜剧演出 </p>
		</div>
		<div class="box bg-light">
			<i class="fa fa-envelope fa-3x"></i>
			<h3>联系我们</h3>
			<p>电话：163524996 <br /> 邮箱：756@163.com <br /> 地址：江苏农林职业技术学院</p>
		</div>
	</section>
	<div class="clr"></div>
	<footer id="main-footer">
		<p>德云社 &copy; 2020, All Rights Reserved</p>
	</footer>
</body>
</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

附页HTML代码框架：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="X-UA-Compatible" content="ie=edg">
	<meta name ="description" content="欢迎来到德云社">
	<meta name="keywords" content="413德云社">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<title>德云社|联系我们</title>
</head>
<body>
	<header>
		<nav id="navber">
			<div class="container">
				<h1><a href="index.html">德云社</a></h1>
				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a href="about.html">关于我们</a></li>
					<li><a href="album.html">我们的回忆</a></li>
					<li><a class="current" href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</nav>
	</header>
	<section id="contact-form" class="py">
		<div class="container">
			<h1 class="l-heading"><span class="text-primary">联系</span>我们</h1>
			<p>如果有疑问请填写以下信息联系我们！</p>
			<form action="process.php">
				<div class="form-group">
					<label for="name">姓名</label>
			   <input type="text" name="name" id="name">
				</div>
				<div class="form-group">
					<label for="email">邮箱</label>
			   <input type="text" name="email" id="email">
				</div>
				<div class="form-group">
					<label for="message">反馈内容</label>
			   <textarea type="text" name="message" id="message"></textarea>
				</div>
				<button type="submit" class="btn">提交</button>
			</form>
		</div>
	</section>
	<section id="contact-info" class="bg-dark">
		<div class="container">
		<div class="box ">
			<i class="fa fa-home fa-3x"></i>
			<h3>联系地址</h3>
			<p>联系地址：江苏农林职业技术学院</p>
		</div>
		<div class="box ">
			<i class="fa fa-phone fa-3x"></i>
			<h3>联系电话</h3>
			<p>电话：+085629356</p>
		</div>
		<div class="box ">
			<i class="fa fa-envelope fa-3x"></i>
			<h3>邮箱</h3>
			<p> 邮箱：756@163.com</p>
		</div>
		</div>
	</section>
	<footer id="main-footer">
		<p>德云社 &copy; 2020, All Rights Reserved</p>
	</footer>
</body>
</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

附页HTML框架：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="X-UA-Compatible" content="ie=edg">
	<meta name ="description" content="欢迎来到德云社">
	<meta name="keywords" content="413德云社">
	<link rel="stylesheet" href="css/style.css">
	<title>德云社| 关于我们</title>
</head>
<body>
	<header>
		<nav id="navber">
			<div class="container">
				<h1><a href="index.html">德云社</a></h1>
				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a class="current" href="about.html">关于我们</a></li>
					<li><a href="album.html">我们的回忆</a></li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</nav>
	</header>
		<section id="about-info" class="py bg-light">
			<div class="container">
			  <div class="info-left">
			  	<h1 class="l-heading">关于<span class="text-primary">德云社</span></h1>
			  	<p>暂且不提最近因为《庆余年》频繁上热搜的郭麒麟少班主。张九龄恋情也出现在了热搜榜单上，德云社的相声演员连狗仔都安排上了，谁看了不得说句佩服呢！<br />除此之外德云社 票的话题更是两次登上热搜，有时候简简单单的德云社三个字就可以在热搜榜单上占据一席之位。</p>

			  </div>
			 <div class="info-right">
			 	<img src="./img/3.jpg" alt="德云社">
			 </div>
			</div>
		</section>
		<section id="testimonials">
			<div class="container">
				<h2 class="l-heading"> 网友评价</h2>
				<div class="testimonial bg-primary">
					<img src="./img/4.jpg" alt="jan">
					<p>最近超级喜欢德云社，了解了里面的人之后，觉得他们都是各有特色并朝着各自的方向不断成长的。人也都很好，以前被蒙骗以为德云社很黑暗，了解之后才知道很好。</p>
				</div>
			</div>
			<div class="container">
				<div class="testimonial bg-primary">
					<img src="./img/5.jpg" alt="Amay">
					<p>德云社年成立，但当时说白了就是召集了一伙说相声的组队找观众。2005年初具规模，之后10年渐火。德云社的这十年，也是很多人认识相声并喜爱他的十年。之前除了侯宝林，马季，马三立老先生和姜昆，冯巩等非专业相声演员观众很少知道其它人.</p>
				</div>
			</div>
			<div class="container">
				<div class="testimonial bg-primary">
					<img src="./img/7.jpg" alt="zhang">
					<p>德云社演员独特的个性和相声表演手法满足了很多人的胃口。（以下部分形容词仅代表个人观点）有汤小脸的贱，刘野鸡的憨，哈萨K，一刀999的二人转式表演也有超群的稳重，这些不同风格满足了不同观众的需求，也让更多人喜欢这个曲艺形式。</p>
				</div>
			</div>
		</section>
	<footer id="main-footer">
		<p>德云社 &copy; 2020, All Rights Reserved</p>
	</footer>
</body>
</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

关于我们的页面HTML和css代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们的回忆</title> 

<style type="text/css">
*{
	padding:0;
	margin:0;
	box-sizing: border-box;
}
html,body{
	font-family: 'segoe UI',Tahoma,Geneva,verdana,sans-serif;
	line-height: 1.7em;
}
a{
	color: #333;
	text-decoration: none;
}
.container{
	margin:0 auto;
	max-width: 1100px;
	overflow: hidden;
	padding: 0 20px;
}
.text-primary{
	color: #f7c08a;
}
.bg-dark{
	background: #444;
	color: #fff;
}
#navber{
	background: #333;
	color: #fff;
	overflow: auto;
}
#navber a{
	color: #fff;
}
#navber h1{
	float: left;
	padding-top: 20px;
}
#navber ul{
	float: right;
	list-style: none;
}
#navber ul li{
	float: left;
}
#navber ul li a{
	display: block;
	padding: 20px;
	text-align: center;
}
#navber ul li a:hover,
html {
	overflow:hidden; 
	-ms-touch-action:none;
	-ms-content-zooming:none;
}
body {
	position:absolute;
	margin:0px;
	padding:0px;
	background:#fff;
	width:100%;
	height:100%;
}
#canvas {
	position:absolute;
	width:100%;
	height:100%;
	background:#fff;
}
</style>

<script type="text/javascript" src="js/ge1doot.js"></script>
<script type="text/javascript">

"use strict";

(function () {
	/* ==== definitions ==== */
	var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1,2],
	// ---- poly constructor ----
	Poly = function (parent, face) {
		this.parent = parent;
		this.ctx    = ctx;
		this.color  = face.fill || false;
		this.points = [];
		if (!face.img) {
			// ---- create points ----
			for (var i = 0; i < 4; i++) {
				this.points[i] = new ge1doot.transform3D.Point(
					parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),
					parent.pc.y +  face.y[i],
					parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)
				);
			}
			this.points[3].next = false;
		}
	},
	// ---- diapo constructor ----
	Diapo = function (path, img, structure) {
		// ---- create image ----
		this.img = new ge1doot.transform3D.Image(
			this, path + img.img, 1, {
				isLoaded: function(img) {
					img.parent.isLoaded = true;
					img.parent.loaded(img);
				}
			}
		);
		this.visible  = false;
		this.normalX  = img.nx;
		this.normalZ  = img.nz;
		// ---- point center ----
		this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
		// ---- target positions ----
		this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
		this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
		// ---- create polygons ----
		this.poly = [];
		for (var i = -1, p; p = structure[++i];) {
			layers[i] = (p.img === true ? 1 : 2);
			this.poly.push(
				new Poly(this, p)
			);
		}
	},
	// ---- init section ----
	init = function (json) {
		// draw poly primitive
		Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
		// ---- init screen ----
		scr = new ge1doot.Screen({
			container: "canvas"
		});
		ctx = scr.ctx;
		scr.resize();
		// ---- init pointer ----
		pointer = new ge1doot.Pointer({
			tap: function () {
				if (camera.over) {
					if (camera.over === camera.target.elem) {
						// ---- return to the center ----
						camera.target.x = 0;
						camera.target.z = 0;
						camera.target.elem = false;
					} else {
						// ---- goto diapo ----
						camera.target.elem = camera.over;
						camera.target.x = camera.over.tx;
						camera.target.z = camera.over.tz;
						// ---- adapt tesselation level to distance ----
						for (var i = 0, d; d = diapo[i++];) {
							var dx = camera.target.x - d.pc.x;
							var dz = camera.target.z - d.pc.z;
							var dist = Math.sqrt(dx * dx + dz * dz);
							var lev = (dist > 1500) ? quality[0] : quality[1];
							d.img.setLevel(lev);
						}
					}
				}
			}
		});
		// ---- init camera ----
		camera = new ge1doot.transform3D.Camera({
			focalLength: Math.sqrt(scr.width) * 10,
			easeTranslation: 0.025,
			easeRotation: 0.06,
			disableRz: true
		}, {
			move: function () {
				this.over = false;
				// ---- rotation ----
				if (pointer.isDraging) {
					this.target.elem = false;
					this.target.ry = -pointer.Xi * 0.01;
					this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);
				} else {
					if (this.target.elem) {
						this.target.ry = Math.atan2(
							this.target.elem.pc.x - this.x,
							this.target.elem.pc.z - this.z
						);
					}
				}
				this.target.rx *= 0.9;
			}
		});
		camera.z  = -10000;
		camera.py = 0;
		// ---- create images ----
		for (var i = 0, img; img = json.imgdata[i++];) {
			diapo.push(
				new Diapo(
					json.options.imagesPath, 
					img, 
					json.structure
				)
			);
		}	
		// ---- start engine ---- >>>
		setInterval(function() {
			quality = (fps > 50) ? [2,3] : [1,2];
			fps = 0;
		}, 1000);
		run();
	},
	// ---- main loop ----
	run = function () {
		// ---- clear screen ----
		ctx.clearRect(0, 0, scr.width, scr.height);
		// ---- camera ----
		camera.move();
		// ---- draw layers ----
		for (var k = -1, l; l = layers[++k];) {
			light = false;
			for (var i = 0, d; d = diapo[i++];) {
				(l === 1 && d.draw()) || 
				(d.visible && d.poly[k].draw());
			}
		}
		// ---- cursor ----
		if (camera.over && !pointer.isDraging) {
			scr.setCursor("pointer");
		} else {
			scr.setCursor("move");
		}
		// ---- loop ----
		fps++;
		requestAnimFrame(run);
	};
	/* ==== prototypes ==== */
	Poly.prototype.draw = function () {
		// ---- color light ----
		var c = this.color;
		if (c.light || !light) {
			var s = c.light ? this.parent.light : 1;
			// ---- rgba color ----
			light = "rgba(" + 
				Math.round(c.r * s) + "," +
				Math.round(c.g * s) + "," + 
				Math.round(c.b * s) + "," + (c.a || 1) + ")";
			ctx.fillStyle = light;
		}
		// ---- paint poly ----
		if (!c.light || this.parent.light < 1) {
			// ---- projection ----
			for (
				var i = 0; 
				this.points[i++].projection();
			);
			this.drawPoly();
			ctx.fill();
		}
	}
	/* ==== image onload ==== */
	Diapo.prototype.loaded = function (img) {
		// ---- create points ----
		var d = [-1,1,1,-1,1,1,-1,-1];
		var w = img.texture.width  * 0.5;
		var h = img.texture.height * 0.5;
		for (var i = 0; i < 4; i++) {
			img.points[i] = new ge1doot.transform3D.Point(
				this.pc.x + (w * this.normalZ * d[i]),
				this.pc.y + (h * d[i + 4]),
				this.pc.z + (w * this.normalX * d[i])
			);
		}
	}
	/* ==== images draw ==== */
	Diapo.prototype.draw = function () {
		// ---- visibility ----
		this.pc.projection();
		if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {
			// ---- light ----
			this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;
			// ---- draw image ----
			this.visible = true;
			this.img.draw();
			// ---- test pointer inside ----
			if (pointer.hasMoved || pointer.isDown) {
				if (
					this.img.isPointerInside(
						pointer.X,
						pointer.Y
					)
				) camera.over = this;
			}
		} else this.visible = false;
		return true;
	}
	return {
		// --- load data ----
		load : function (data) {
			window.addEventListener('load', function () {
				ge1doot.loadJS(
					"js/imageTransform3D.js",
					init, data
				);
			}, false);
		}
	}
})().load({
	imgdata:[
		// north
		{img:'imgs/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},
		{img:'imgs/2.jpg', x:0,     y:0, z:1500, nx:0, nz:1},
		{img:'imgs/3.jpg', x:1000,  y:0, z:1500, nx:0, nz:1},
		// east
		{img:'imgs/4.jpg', x:1500,  y:0, z:1000, nx:-1, nz:0},
		{img:'imgs/5.jpg', x:1500,  y:0, z:0, nx:-1, nz:0},
		{img:'imgs/6.jpg', x:1500,  y:0, z:-1000, nx:-1, nz:0},
		// south
		{img:'imgs/7.jpg', x:1000,  y:0, z:-1500, nx:0, nz:-1},
		{img:'imgs/8.jpg', x:0,     y:0, z:-1500, nx:0, nz:-1},
		{img:'imgs/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},
		// west
		{img:'imgs/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},
		{img:'imgs/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},
		{img:'imgs/12.jpg', x:-1500, y:0, z:1000, nx:1, nz:0}
	],
	structure:[
		{
			// wall
			fill: {r:255, g:255, b:255, light:1},
			x: [-1001,-490,-490,-1001],
			z: [-500,-500,-500,-500],
			y: [500,500,-500,-500]
		},{
			// wall
			fill: {r:255, g:255, b:255, light:1},
			x: [-501,2,2,-500],
			z: [-500,-500,-500,-500],
			y: [500,500,-500,-500]
		},{
			// wall
			fill: {r:255, g:255, b:255, light:1},
			x: [0,502,502,0],
			z: [-500,-500,-500,-500],
			y: [500,500,-500,-500]
		},{
			// wall
			fill: {r:255, g:255, b:255, light:1},
			x: [490,1002,1002,490],
			z: [-500,-500,-500,-500],
			y: [500,500,-500,-500]
		},{
			// shadow
			fill: {r:0, g:0, b:0, a:0.2},
			x: [-420,420,420,-420],
			z: [-500,-500,-500,-500],
			y: [150, 150,-320,-320]
		},{
			// shadow
			fill: {r:0, g:0, b:0, a:0.2},
			x: [-20,20,20,-20],
			z: [-500,-500,-500,-500],
			y: [250, 250,150,150]
		},{
			// shadow
			fill: {r:0, g:0, b:0, a:0.2},
			x: [-20,20,20,-20],
			z: [-500,-500,-500,-500],
			y: [-320, -320,-500,-500]
		},{
			// shadow
			fill: {r:0, g:0, b:0, a:0.2},
			x: [-20,20,10,-10],
			z: [-500,-500,-100,-100],
			y: [-500, -500,-500,-500]
		},{
			// base
			fill: {r:32, g:32, b:32},
			x: [-50,50,50,-50],
			z: [-150,-150,-50,-50],
			y: [-500,-500,-500,-500]
		},{
			// support
			fill: {r:16, g:16, b:16},
			x: [-10,10,10,-10],
			z: [-100,-100,-100,-100],
			y: [300,300,-500,-500]
		},{
			// frame
			fill: {r:255, g:255, b:255},
			x: [-320,-320,-320,-320],
			z: [0,-20,-20,0],
			y: [-190,-190,190,190]
		},{
			// frame
			fill: {r:255, g:255, b:255},
			x: [320,320,320,320],
			z: [0,-20,-20,0],
			y: [-190,-190,190,190]
		},
		{img:true},
		{
			// ceilingLight
			fill: {r:255, g:128, b:0},
			x: [-50,50,50,-50],
			z: [450,450,550,550],
			y: [500,500,500,500]
		},{
			// groundLight
			fill: {r:255, g:128, b:0},
			x: [-50,50,50,-50],
			z: [450,450,550,550],
			y: [-500,-500,-500,-500]
		}
	],
	options:{
		imagesPath: ""
	}
});
</script>

</head> 
<body>
	<header>
		<nav id="navber">
			<div class="container">
				<h1><a href="index.html">德云社</a></h1>
				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a class="current" href="about.html">关于我们</a></li>
					<li><a href="album.html">我们的回忆</a></li>
					<li><a href="contact.html">联系我们</a></li>
				</ul>
			</div>
		</nav>
	</header>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<canvas id="canvas">你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。</canvas>


</body>
</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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448

想学习更多技术获得更多源码欢迎关注我的公众号"码农日常"
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/167108?site