|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>HumUI Demo</title>
<link rel="shortcut icon" href="img/aiued.ico">
<link rel="stylesheet" href="../dist/css/hum.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-114x114.png">
<style type="text/css">
html,body{
overflow-x: hidden;
background-color: #fff;
background-image: url(img/ft_bg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size:60%;
height: 100%;
}
.hd {
padding: 60px 0;
background-image: url(img/hd_bg1.jpg);
background-repeat: no-repeat;
background-size:100%;
}
.hd .page_title {
text-align: center;
font-size: 34px;
color: #fff;
font-weight: 400;
margin: 0 15%;
}
.page_desc {
text-align: center;
color: #fff;
font-size: 14px;
}
</style>
</head>
<body ontouchstart>
<div style="display: none;">
<img src="img/wx_aiued.png"/>
</div>
<header class="hd">
<h1 class="page_title"><img src="img/Glogo@1.5x.png" /></h1>
<p class="page_desc">帮助你快速构建移动端应用的前端框架</p>
</header>
<section class="ui-container">
<section id="list">
<div class="demo-item">
<div class="demo-block">
<ul class="ui-grid-nine">
<li data-href="src/base.html" class="ui-col-33 ui-text-center">
<span class="iconfont"></span>
<p>Base</p>
</li>
<li data-href="src/layout.html" class="ui-col-33 ui-text-center">
<span class="iconfont"></span>
<p>Layout</p>
</li>
<li data-href="src/element.html" class="ui-col-33 ui-text-center">
<div class="ui-badge">10</div>
<span class="iconfont"></span>
<p>Element</p>
</li>
<li data-href="src/component.html" class="ui-col-33 ui-text-center">
<div class="ui-badge">32</div>
<span class="iconfont"></span>
<p>Components</p>
</li>
<li data-href="src/javascript.html" class="ui-col-33 ui-text-center">
<div class="ui-badge-dot"></div>
<span class="iconfont"></span>
<p>JavaScript</p>
</li>
<li data-href="src/template.html" class="ui-col-33 ui-text-center">
<span class="iconfont"></span>
<p>Template</p>
</li>
</ul>
</div>
</div>
</section>
</section>
<!-- /.ui-container-->
<script src="../dist/lib/zepto/zepto.min.js"></script>
<script type="text/javascript">
$('.ui-grid-nine li').click(function(){
if($(this).data('href')){
location.href= $(this).data('href');
}
});
</script>
</body>
</html>
|
