<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></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"/>
</head>
<link rel="stylesheet" href="./css/amazeui.min.css">
<link rel="stylesheet" href="./css/css.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 p {
color: #7f8c8d;
margin: 0;
padding: 15px 0;
text-align: center;
background: #2d3e50;
}
</style>
<body>
<header class="am-topbar am-topbar-inverse">
<h1 class="am-topbar-brand">
<a href="#">Amaze UI</a>
</h1>
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success 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" id="doc-topbar-collapse">
<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 class="am-active"><a href="#">2. 去火星</a></li>
<li><a href="#">3. 还是回地球</a></li>
<li class="am-disabled"><a href="#">4. 下地狱</a></li>
<li class="am-divider"></li>
<li><a href="#">5. 桥头一回首</a></li>
</ul>
<li><a href="#">历史版本</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">关于我们</a></li>
</li>
</ul>
<form class="am-topbar-form am-topbar-left am-form-inline" role="search">
<div class="am-form-group">
<input type="text" class="am-form-field am-input-sm" placeholder="搜索">
</div>
</form>
<div class="am-topbar-right">
<div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
<button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>其他 <span class="am-icon-caret-down"></span></button>
<ul class="am-dropdown-content">
<li><a href="#">注册</a></li>
<li><a href="#">随便看看</a></li>
</ul>
</div>
</div>
<div class="am-topbar-right">
<button class="am-icon-user am-btn am-btn-primary am-topbar-btn am-btn-sm">登录</button>
</div>
</div>
</header>
<div class="nav2">
<div class="get">
<div class="am-g">
<div class="am-u-lg-12">
<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>
</div>
<div class="detail">
<div class="am-g am-container">
<div class="am-u-lg-12">
<h2 class="detail-h2">One Web 、Any Device,期待和你一起去实现!</h2>
<div class="am-g">
<div class="am-u-lg-3 am-u-md-6 am-u-sm-12 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-lg-3 am-u-md-6 am-u-sm-12 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-lg-3 am-u-md-6 am-u-sm-12 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-lg-3 am-u-md-6 am-u-sm-12 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>
<footer class="footer">
<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>
</footer>
</body>
</html>
利用软妹纸ui写的前端
最新推荐文章于 2021-08-30 20:11:00 发布