-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
executable file
·394 lines (374 loc) · 22.7 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
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Amaze UI 案例展示</title>
<meta name="keywords" content="HTML, HTML5, CSS, CSS3, JS, JavaScript, framework, Amaze UI, front-end, frontend, web development, 前端框架, 开源, meizi, meizi UI, 妹子UI, 妹子UI案例,妹子UIWeb Components">
<meta name="description" content="Amaze UI案例展示是将基于Amaze UI优秀的响应式网站、HTML5移动应用集中进行展示的官方专题页面">
<link rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css">
<link rel="stylesheet" href="css/style.css"></head>
<body>
<!--[if lte IE 9 ]>
<div class="am-alert am-alert-danger ie-warning" data-am-alert>
<button type="button" class="am-close">×</button>
<div class="am-container">
365 安全卫士提醒：你的浏览器太古董了，妹子无爱，
<a
href="http://browsehappy.com/" target="_blank">速速点击换一个</a>
！
</div>
</div>
<![endif]-->
<header class="am-topbar am-topbar-inverse am-topbar-fixed-top headercolor" id="header">
<div class="am-container">
<h1 class="am-topbar-brand am-text-ir">
<a href="#">Amaze UI</a>
</h1>
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}">
<span class="am-sr-only">导航切换</span>
<span class="am-icon-bars"></span>
</button>
<div class="am-collapse am-topbar-collapse am-topbar-right" id="doc-topbar-collapse">
<ul class="am-nav am-nav-pills am-topbar-nav">
<li class="am-active">
<a href="#">Cases</a>
</li>
<li>
<a href="http://amazeui.org/" target="_blank">Web</a>
</li>
<li>
<a href="http://t.amazeui.org/" target="_blank">Touch</a>
</li>
<li>
<a href="https://github.com/amazeui" target="_blank">GitHub</a>
</li>
<li>
<a href="http://ask.amazeui.org/" target="_blank">论坛</a>
</li>
<li>
<a href="http://www.yunshipei.com/about/contacts.html" target="_blank">联系我们</a>
</li>
</ul>
</div>
</div>
</header>
<!-- banner -->
<div class="bgimg ">
<div class="am-container">
<h1 class="am-animation-slide-right">中国首个开源 HTML5 跨屏前端框架 Amaze UI</h1>
<h2 class="am-animation-scale-up">优站精选</h2>
<button type="button" class="am-btn am-btn-secondary am-radius am-animation-slide-bottom"><a href="http://ask.amazeui.org/?/question/338" target="_blank"><b style="color: #ffffff;">提交案例</b></a>
</button>
</div>
</div>
<article>
<div class="am-container" id="caseimgs">
<div class="am-tabs" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active">
<a href="#tab1">响应式</a>
</li>
<li>
<a href="#tab2">移动站</a>
</li>
</ul>
<!-- 响应式tab -->
<div class="am-tabs-bd">
<div class="am-tab-panel am-active" id="tab1">
<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-2 am-thumbnails">
<li>
<div class="gallery-inner">
<a href="http://www.petshow.cc/v2/indexview " target="_blank" class="onimg" rel="nofollow" style="padding: 20px; ">
<h1 style="color:#ffffff;margin-top: 30px;">宠物秀</h1>
<p style="color:#ffffff;font-size: 15px;">
宠物秀最有趣的萌宠社区，快来一起秀我们的爱宠吧！有宠物猫、宠物狗、加菲猫、哈士奇、金毛、美国短毛猫、英国短毛猫等等各种宠物的宠物涂鸦，你还可以看到新鲜事等各种趣闻。
</p>
</a>
<img class="am-thumbnail" src="images/2.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.imj2.com/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">俊贰网络</h1>
<p style="color:#ffffff;font-size: 15px;">
俊贰为江门恩平提供品牌网站设计建设、平面设计、广告拍摄/摄影、淘宝设计装修、SEO关键词优化、营销策划服务，做专业级的制作帮助您造高端的网站设计建设、平面设计、广告拍摄/摄影、淘宝设计装修、SEO关键词优化、营销策划服务。
</p>
</a>
<img class="am-thumbnail" src="images/web3.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://kgdn.kangbeijia.cn/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">康贝佳口腔旗舰站</h1>
<p style="color:#ffffff;font-size: 15px;">
经过二十年的发展，已被业界公认为最具成长性的自主品牌连锁机构。自成立之初，其人性化、温馨的诊疗环境，领先国内的先进设备、一流的医生，向社会充分展示出全国连锁品牌所特有的夺目光彩，经过十多年的沉淀发展，集团至今拥有医院（门诊部）20多家，员工千余人。
</p>
</a>
<img class="am-thumbnail" src="images/web15.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.doctors-cloud.com/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">医云健康</h1>
<p style="color:#ffffff;font-size: 15px;">医云健康：连接患者和医生的桥梁，搭建属于自己的健康中心，并可以实时在线咨询全国各地的医生，寻找属于自己的健康方案。</p>
</a>
<img class="am-thumbnail" src="images/web5.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.getpoint.cn/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">VI设计公司</h1>
<p style="color:#ffffff;font-size: 15px;">
简点创意拥有4A公司核心团队与十年国际品牌塑造经验，精准为企业塑造市场上独一无二强势品牌,提供品牌策划设计，宣传物料设计、VI设计公司、CI设计公司、LOGO设计公司、画册设计公司、品牌策划公司、广州设计公司、广州广告公司、电商设计公司。
</p>
</a>
<img class="am-thumbnail" src="images/web7.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://dlab.so/" class="onimg" target="_blank" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">Dlab</h1>
<p style="color:#ffffff;font-size: 15px;">从优秀的原创设计被发现，到属于你的原创设计衣服成型，再到畅销全球各地，Dlab为全球优秀设计师提供了实现梦想的舞台。</p>
</a>
<img class="am-thumbnail" src="images/web8.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.judaoyouda.com/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">矩道优达</h1>
<p style="color:#ffffff;font-size: 15px;">
北京矩道优达网络科技有限公司（以下简称“矩道优达”）是一家提供在线教育与教育信息服务的公司。但是与很多教育公司都不一样，矩道优达致力于提供一个由内而外的全新教育方式，提供最优的教育体验。让矩道优达的产品可以成为每个人学习、互助的第一选择。
</p>
</a>
<img class="am-thumbnail" src="images/web9.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.trcloud.cn/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">泰然云</h1>
<p style="color:#ffffff;font-size: 15px;">泰然云：拥有计算、存储秒级响应的调度速度，100%网络隔离的安全环境，性能优异的存储设备，泰然云为你提供云端极致体验。</p>
</a>
<img class="am-thumbnail" src="images/web10.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.liuyunfei.cn/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">lovepanda博客</h1>
<p style="color:#ffffff;font-size: 15px;">
柳云飞的个人博客，主要是分享java和HTML相关的知识。本站采用java的JFinal框架和Amaze UI前端UI框架自主开发而成，网站会不定时更新新的模块和功能。当功能完善后会考虑开源。
</p>
</a>
<img class="am-thumbnail" src="images/web11.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.shmythware.com/index.html" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">极域上海</h1>
<p style="color:#ffffff;font-size: 15px;">
极域致力于教育信息化领域11年，研发电子教室、语言学习系统、录播系统、视频服务系统等全系列产品及解决方案，拥有16个语言版本，市场范围覆盖全球30万所大中小学用户，人数超过1200万。
</p>
</a>
<img class="am-thumbnail" src="images/web13.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://8mbang.com/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">爸妈邦</h1>
<p style="color:#ffffff;font-size: 15px;">
爸妈邦,为您提供宝宝教育,育儿知识,孕期注意,怀孕,育儿,早教,儿童疾病,新生儿护理, 母乳喂养,辅食添加等专业内容，强大的海外原创团队及特邀专家为您提供贴心指导。
</p>
</a>
<img class="am-thumbnail" src="images/web17.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.61tk.com/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">童康体检</h1>
<p style="color:#ffffff;font-size: 15px;">
上海童康暨上海童康健康管理有限公司，2009年12月成立于上海，是沪上一家专注于儿童健康的专业服务机构。全资拥有三家门诊部和一家从事在线医疗、电子商务的上海童康信息科技有限公司。
</p>
</a>
<img class="am-thumbnail" src="images/web14.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.solove.com.hk/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">solove素乐</h1>
<p style="color:#ffffff;font-size: 15px;">solove素乐官方网站 - 是移动电源，亦是饰品</p>
</a>
<img class="am-thumbnail" src="images/web4.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.zzbankloan.com/index.asp" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">郑州贷款网</h1>
<p style="color:#ffffff;font-size: 15px;">
努力做郑州地区最专业的贷款咨询及从业者交流平台，这里有专业的贷款解答及行业专业知识，贷款从业者可以组织参加行业交流会议，积累人脉，网站本身不提供贷款，郑州贷款网提醒您贷前切勿支付任何费用！
</p>
</a>
<img class="am-thumbnail" src="images/web12.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.nongmiao.com/shuixianhuazt/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">水仙花专题</h1>
<p style="color:#ffffff;font-size: 15px;">
水培的水仙花一般是不留种的，如果要培养第二年开花的种球要在土壤中生长，在土壤中开化后剪去上部的叶子，留下几片叶片进行光合作用，进行营养生长，待夏天所有的叶片都枯萎后，将地下的球茎挖掘出来通风处保存，秋天再种下，这样经过二年培育的小子球就可以开花了。
</p>
</a>
<img class="am-thumbnail" src="images/web16.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.tngou.net/bbs" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">天狗论坛</h1>
<p style="color:#ffffff;font-size: 15px;">健康资讯 、健康技术、药品信息、疾病信息、病状信息、手术项目、检查项目、医院、药店、药企、菜谱、食谱等相关的论坛</p>
</a>
<img class="am-thumbnail" src="images/web6.jpg" />
</div>
</li>
</ul>
</div>
<!-- 移动端Tab -->
<div class="am-tab-panel" id="tab2">
<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-3 am-thumbnails">
<li>
<div class="gallery-inner">
<a href="http://m.petshow.cc/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">宠物秀</h1>
<img src="images/app1000.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">
宠物秀最有趣的萌宠社区，快来一起秀我们的爱宠吧！有宠物猫、宠物狗、加菲猫、哈士奇、金毛、美国短毛猫、英国短毛猫等等各种宠物的宠物涂鸦，你还可以看到新鲜事等各种趣闻。
</p>
</a>
<img class="am-thumbnail" src="images/app1.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.dzapp.net/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">扬州商街</h1>
<img src="images/app88.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">扬州商街：扬州商街，吃喝玩乐全汇集，多个品牌入驻，多种优惠力度，任你选择。</p>
</a>
<img class="am-thumbnail" src="images/app8.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://m.yulemao.cn/index.php" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">娱乐猫</h1>
<img src="images/app33.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">
娱乐猫应用,最新最热的明星娱乐八卦新闻平台。金秀贤,李敏镐,杨幂,邓紫棋,萧敬腾,张亮,林志颖等众多大牌明星粉丝们的聚集地,看新闻,评八卦,为您私人定制的APP应用.
</p>
</a>
<img class="am-thumbnail" src="images/app3.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://m.wllq.cn/index.php" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">河南万里路桥</h1>
<img src="images/app1010.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">
河南万里路桥集团股份有限公司是以道路桥梁养护新技术研究推广和养护技术咨询服务为主营业务的高科技型集团企业，集团12家成员企业以养护检测设计咨询、养护新技术施工、养路机械研发生产销售、养路材料研发生产销售、彩色路面设计施工、交通机电工程施工等业务组件道路桥梁养护全产业链，为公路交通与城建市政行业客户提供道路桥梁养护综合服务。
</p>
</a>
<img class="am-thumbnail" src="images/app10.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://m.wozuikaopu.com/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">靠谱</h1>
<img src="images/app22.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">靠谱 - 靠谱便利，20分钟送货上门，应有尽有，货到付款！</p>
</a>
<img class="am-thumbnail" src="images/app2.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.jb020.com/wap/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">积宝商城</h1>
<img src="images/app66.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">
积宝商城：网上综合销售平台，颠覆性的三级分销分润模式（商品价格不高于其他销售平台），让会员在消费的同时拥有三级分销利润，会员数量得以飞速发展，而且会员具有高粘度。
</p>
</a>
<img class="am-thumbnail" src="images/app6.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://m.bookask.com/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">书问</h1>
<img src="images/app77.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">让天下没有难找的书 - 书问</p>
</a>
<img class="am-thumbnail" src="images/app7.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://o2o.yjwhcb.net/mobile/index/more.html" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">昆明生活圈</h1>
<img src="images/app99.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">为昆明人民带来一站式生活服务，包括商家搜索，团购以及小区服务和家政服务，打造昆明生活服务第一圈。</p>
</a>
<img class="am-thumbnail" src="images/app9.jpg" />
</div>
</li>
<li>
<div class="gallery-inner">
<a href="http://www.gxztbf.com/m/" target="_blank" class="onimg" rel="nofollow" style="padding: 20px;">
<h1 style="color:#ffffff;margin-top: 30px;">众拓</h1>
<img src="images/app55.png" style="width: 150px;">
<p style="color:#ffffff;font-size: 15px;">南宁市众拓活动板房有限公司_钢结构活动房_彩钢板房_轻钢别墅_岗亭_广西活动板房生产厂家手机站。</p>
</a>
<img class="am-thumbnail" src="images/app5.jpg" />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>
<script type="text/javascript">
$(window).scroll(function()
{
if ($(window).scrollTop() > 0)
{
$("#header").addClass('chageheader');
}
else
{
$("#header").removeClass('chageheader');
}
});
</script>
</body>
</html>