-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
441 lines (391 loc) · 19.1 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H5课程简介 - 北京菜鸟在线</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/css.css">
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./js/myjs.js"></script>
<script src="http://cdn.bootcss.com/masonry/4.1.1/masonry.pkgd.min.js"></script>
</head>
<body>
<!-- 菜单部分 -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle btn btn-primary" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="fa fa-bars fa-1x"></span>
</button>
</div>
<a class="navbar-brand navbar-collapse collapse" href="#">
<i class="fa fa-codepen fa-1x"> H5</i></a>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#class"> 课程大纲</a></li>
<li><a href="#student"> 精彩瞬间</a></li>
<li><a href="#info"> 优惠信息</a></li>
<li><a href="#footer"> 联系信息</a></li>
</ul>
</div>
</div>
</nav>
<!-- 欢迎广告 -->
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="apng" src="./images/1.jpg" alt="...">
<div class="carousel-caption">
<div>
<h3>世界因你而精彩!</h3>
</div>
</div>
</div>
<div class="item">
<img class="apng" src="./images/2.jpg" alt="...">
<div class="carousel-caption">
<div>
<h3 class="text-orang">世界因你而精彩!</h3>
</div>
</div>
</div>
<div class="item">
<img class="apng" src="./images/3.jpg" alt="...">
<div class="carousel-caption">
<div>
<h1 class="text-blue">世界因你而<span class="text-white">精彩!</span></h1>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<br id="class">
<!-- 课程大纲 -->
<div class="container" id="class">
<div class="title text-primary">
<h1><i class="fa fa-university" aria-hidden="true"></i> 课程大纲</h1>
</div>
<div class="class">
<div class="class-head">
<h3>前端课程</h3>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-html5 icon text-warning" aria-hidden="true"></i>
<h4>HTML5 课程大纲</h4>
</div>
<div class="class-body">
<p>HTML的英文全称为Hyper Text Markup Language，即超文本标记语言。HTML5是HTML的一个新版本。HTML 不是一种编程语言，而是一种标记语言。</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-css3 icon text-primary" aria-hidden="true"></i>
<h4>CSS3 课程大纲</h4>
</div>
<div class="class-body">
<p>
CSS即层叠样式表Cascading StyleSheet。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-jsfiddle icon text-blue" aria-hidden="true"></i>
<h4>JavaScript 课程大纲</h4>
</div>
<div class="class-body">
<p>
JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。
</p>
</div>
</div>
</div>
<div class="class-head">
<h3>框架应用</h3>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-btc icon text-danger" aria-hidden="true"></i>
<h4>BootStrap 课程大纲</h4>
</div>
<div class="class-body">
<p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-glide-g icon text-success" aria-hidden="true"></i>
<h4>jQuery 课程大纲</h4>
</div>
<div class="class-body">
<p>
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。核心理念是write less,do more(写得更少,做得更多)。
</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-github icon text-primary" aria-hidden="true"></i>
<h4>Git 课程大纲</h4>
</div>
<div class="class-body">
<p>
git是一个分布式版本控制软件，最初由林纳斯·托瓦兹（Linus Torvalds）创作，于2005年以GPL发布。开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
</p>
</div>
</div>
</div>
<div class="class-head">
<h3>全栈开发</h3>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-book icon text-success" aria-hidden="true"></i>
<h4>Node.js 课程大纲</h4>
</div>
<div class="class-body">
<p>HTML的英文全称为Hyper Text Markup Language，即超文本标记语言。HTML5是HTML的一个新版本。HTML 不是一种编程语言，而是一种标记语言。</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-recycle icon text-blue" aria-hidden="true"></i>
<h4>React.js 课程大纲</h4>
</div>
<div class="class-body">
<p>
CSS即层叠样式表Cascading StyleSheet。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="img-class">
<i class="fa fa-server icon text-orang" aria-hidden="true"></i>
<h4>Meteor 课程大纲</h4>
</div>
<div class="class-body">
<p>
JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。
</p>
</div>
</div>
</div>
</div>
</div>
<br>
<!-- 学员介绍 -->
<div class="container" id="student">
<div class="title text-right text-blue">
<h1><i class="fa fa-instagram fa-1x" aria-hidden="true"> </i> 精彩瞬间</h1>
</div>
<div class="review">
<div class="hreview thumbnail">
<img src="./images/t1.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t2.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t3.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t4.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t5.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t6.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t7.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t8.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t9.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t10.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t11.jpg" alt="" />
</div>
<div class="hreview thumbnail">
<img src="./images/t12.jpg" alt="" />
</div>
</div>
</div>
</div>
<!-- 优惠信息 -->
<div class="container" id="info">
<div class="title text-danger">
<h1><span class="glyphicon glyphicon-usd"></span>优惠折扣</h1>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<strong>前端课程</strong>
</div>
<table class="table table-info table-active">
<tr>
<th>课程名称</th>
<th>原价</th>
<th>折扣价</th>
</tr>
<tr>
<td>HTML5</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
<tr>
<td>CSS3</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
<tr>
<td>JavaScript</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">全栈课程</h3>
</div>
<table class="table table-info table-active">
<tr>
<th>课程名称</th>
<th>原价</th>
<th>折扣价</th>
</tr>
<tr>
<td>Node.js</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
<tr>
<td>React.js</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
<tr>
<td>Meteor</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<strong>框架课程</strong>
</div>
<table class="table table-info table-active">
<tr>
<th>课程名称</th>
<th>原价</th>
<th>折扣价</th>
</tr>
<tr>
<td>BootStrap</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
<tr>
<td>jQuery</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
<tr>
<td>Git源码管理</td>
<td><s>$1000</s></td>
<td class="new-p">$800</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 底部联系信息 -->
<div class="container-fluid" id="footer">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6">
<h3>公司信息</h3>
<p>公司地址: 北京市海淀区上地信息路甲28号科实大厦B座05-D1 <br>
校区地址: 北京市海淀区西北旺永丰中路99号人才基地</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6">
<h3>联系方式</h3>
<p>QQ: 721442 <br>
WeChat: HTML5全栈开发 <br>
总机电话：010-82346303</p>
</div>
<div class="col-md-2 col-sd-4 col-xs-12">
<h3>其他校区</h3>
<p>广州校区<br>
电话：020-6229 6345 <br>
地址：广州市天河区天源路1111号利好商务大厦6楼608-616室</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="about">
<H3>关于我们</H3>
<p>
我们是一支充满激情的团队，年轻，不失创意。我们将带着极大的热情去打造完美的课程体系，让您在学习过程中，感受到我们无限的创意。
</p>
<p>
我们是一支具有高度责任感的团队，我们对用户，对讲师，对我们自己负责，对课程与服务”吹毛求疵”般的要求，打造极致课程，是我们不变的承诺。
</p>
<p class="foot-btn">
<button type="button" class="btn btn-primary">更多...</button>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row p-info">
<i class="fa fa-codepen fa-1x"> </i> H5课程 - 北京菜鸟在线
</div>
<br>
</div>
</div>
</div>
</body>
</html>