-
Notifications
You must be signed in to change notification settings - Fork 0
/
non-responsive.html
332 lines (287 loc) · 9.54 KB
/
non-responsive.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Non-responsive | Amaze UI Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
<link rel="stylesheet" href="assets/css/amazeui.min.css"/>
<style>
.get {
background: #1E5B94;
color: #fff;
text-align: center;
padding: 100px 0;
}
.get-title {
font-size: 200%;
border: 2px solid #fff;
padding: 20px;
display: inline-block;
}
.get-btn {
background: #fff;
}
.detail {
background: #fff;
}
.detail-h2 {
text-align: center;
font-size: 150%;
margin: 40px 0;
}
.detail-h3 {
color: #1f8dd6;
}
.detail-p {
color: #7f8c8d;
}
.detail-mb {
margin-bottom: 30px;
}
.hope {
background: #0bb59b;
padding: 50px 0;
}
.hope-img {
text-align: center;
}
.hope-hr {
border-color: #149C88;
}
.hope-title {
font-size: 140%;
}
.about {
background: #fff;
padding: 40px 0;
color: #7f8c8d;
}
.about-color {
color: #34495e;
}
.about-title {
font-size: 180%;
padding: 30px 0 50px 0;
text-align: center;
}
.footer {
background: #2d3e50;
}
.footer p {
color: #7f8c8d;
margin: 0;
padding: 15px 0;
text-align: center;
}
/* 禁用响应式*/
.am-container {
width: 980px !important;
max-width: none;
}
.get,
.hope,
.footer {
min-width: 980px;
}
.am-topbar-collapse {
clear: none;
padding: 0 10px;
}
.am-topbar-nav {
float: left;
margin: 0;
}
.am-topbar-nav > li {
display: inline-block;
margin: 0!important;
}
.am-topbar-collapse .am-dropdown.am-active .am-dropdown-content {
position: absolute;
}
.am-topbar-nav > li > a {
position: relative;
line-height: 50px;
padding: 0 10px;
}
.am-topbar-nav > li > a:after {
position: absolute;
left: 50%;
margin-left: -6px;
bottom: 0;
content: "";
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-bottom: 6px solid #f8f8f8;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 0 dotted;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.am-topbar-nav > li > a:hover:after {
border-bottom-color: #666666;
}
.am-topbar-nav > li.am-dropdown > a:after {
display: none;
}
.am-topbar-nav > li.am-active > a,
.am-topbar-nav > li.am-active > a:hover,
.am-topbar-nav > li.am-active > a:focus {
border-radius: 0;
color: #0e90d2;
background: none;
}
.am-topbar-nav > li.am-active > a:after {
border-bottom-color: #0e90d2;
}
</style>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
<div class="am-container">
<h1 class="am-topbar-brand">
<a href="#">Amaze UI</a>
</h1>
<div class="am-topbar-collapse" id="collapse-head">
<ul class="am-nav am-nav-pills am-topbar-nav">
<li class="am-active"><a href="#">首页</a></li>
<li><a href="#">项目</a></li>
<li class="am-dropdown" data-am-dropdown>
<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
下拉菜单 <span class="am-icon-caret-down"></span>
</a>
<ul class="am-dropdown-content">
<li class="am-dropdown-header">标题</li>
<li><a href="#">1. 默认样式</a></li>
<li><a href="#">2. 基础设置</a></li>
<li><a href="#">3. 文字排版</a></li>
<li><a href="#">4. 网格系统</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div class="get">
<div class="am-container">
<h1 class="get-title">Amaze UI - HTML5 跨屏前端框架</h1>
<p>
期待你的参与，共同打造一个简单易用的前端框架
</p>
<p>
<a href="http://amazeui.org" class="am-btn am-btn-sm get-btn">获取新get技能√</a>
</p>
</div>
</div>
<div class="detail">
<div class="am-container">
<h2 class="detail-h2">One Web 、Any Device，期待和你一起去实现!</h2>
<div class="am-g">
<div class="am-u-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-mobile am-icon-sm"></i>
为移动而生
</h3>
<p class="detail-p">
Amaze UI 采用业内先进的 mobile first 理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
</p>
</div>
<div class="am-u-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-cogs am-icon-sm"></i>
组件丰富，模块化
</h3>
<p class="detail-p">
Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Widgets，可快速构建界面出色、体验优秀的跨屏页面，大幅度提升你的开发效率。
</p>
</div>
<div class="am-u-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-check-square-o am-icon-sm"></i>
本地化支持
</h3>
<p class="detail-p">
相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。
</p>
</div>
<div class="am-u-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-send-o am-icon-sm"></i>
轻量级，高性能
</h3>
<p class="detail-p">
Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。
</p>
</div>
</div>
</div>
</div>
<div class="hope">
<div class="am-g am-container">
<div class="am-u-sm-6 hope-img">
<img src="assets/i/examples/landing.png" alt="" data-am-scrollspy="{animation:'slide-left', repeat: false}">
<hr class="am-article-divider am-show-sm-only hope-hr">
</div>
<div class="am-u-sm-6">
<h2 class="hope-title">同我们一起打造你的前端框架</h2>
<p>
在知识爆炸的年代，我们不愿成为知识的过客，拥抱开源文化，发挥社区的力量，参与到Amaze Ui开源项目能获得自我提升。
</p>
</div>
</div>
</div>
<div class="about">
<div class="am-container">
<h2 class="about-title about-color">Amaze UI 崇尚开放、自由，非常欢迎大家的参与</h2>
<div class="am-g">
<div class="am-u-sm-4">
<form class="am-form">
<label for="name" class="about-color">你的姓名</label>
<input id="name" type="text">
<br/>
<label for="email" class="about-color">你的邮箱</label>
<input id="email" type="email">
<br/>
<label for="message" class="about-color">你的留言</label>
<textarea id="message"></textarea>
<br/>
<button type="submit" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-check"></i> 提 交</button>
</form>
<hr class="am-article-divider am-show-sm-only">
</div>
<div class="am-u-sm-8">
<h4 class="about-color">关于我们</h4>
<p>AllMobilize Inc (美通云动科技有限公司)
由前微软美国总部IE浏览器核心研发团队成员及移动互联网行业专家在美国西雅图创立，旨在解决网页在不同移动设备屏幕上的适配问题。基于国际专利技术并结合最前沿的HTML5技术，云适配解决方案可以帮助企业快速将桌面版网站适配到各种移动设备终端的屏幕上，不仅显著地提高了企业网站的用户体验以及销售转化率，而且大幅度地节省了企业开发和维护移动网站的费用。</p>
<h4 class="about-color">团队介绍</h4>
<p>AllMobilize Inc 获得了微软创投孵化器的支持，其领先科技已得到全球多家企业及机构的认可与信赖，客户包括全球500强企业、美国政府、国内政府机关、国内外上市公司、以及互联网标准化组织W3C。</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="am-container">
<p>© 2014 <a href="http://www.yunshipei.com" target="_blank">AllMobilize, Inc.</a> Licensed under <a
href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. by the AmazeUI Team.</p>
</div>
</footer>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>