关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

amaze ui最好用的html5移动web开发框架

HTML5 太平洋学习网 浏览 评论

 amaze ui框架用于开发html5移动web页面非常的好用,这也是我自己项目所用到的,amaze ui框架扩展性非常大,因为它只提供移动ui界面,其它的你该用什么就用什么,我采用的是amaze ui+jquery来制作了一个移动登录页面的教程,以便让各位快速入门amaze ui。

1:进入amaze ui官网下载amaze ui开发框架所需要的js,css等,官网下载地址:http://amazeui.org/getting-started

2:下载前端开发工具sublime或者webstorm,因为这两个前端开发工具是目前市面上最好的,有强大的js,html提示功能,本人使用的是webstorm开发工具,下面的案例将以webstorm来举例。

3:在下载的AmazeUI-2.7.2文件夹下面的asset目录下找到这些js,css,fonts导入到项目中,我的结构如下,app.js和app.css都是自定义的,用来添加自定义的样式或者事件。

QQ拼音截图未命名.bmp

4:使用amaze ui制作一个手机版登录页面,体验一下这个html5移动开发框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--每一个移动web页面头部都要加这个meta,这样它才会是手机网站的样式,而不是自适应样式-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>测试angularjs页面</title>
    <link rel="stylesheet" href="asset/css/amazeui.min.css">
    <link rel="stylesheet" href="asset/css/amazeui.flat.min.css">
    <link rel="stylesheet" href="asset/css/app.css">
</head>
<body>
<form class="am-form" style="margin-top: 30%">
    <img src="asset/images/logo.png" class="am-center" style="width:50%;margin-bottom: 5% ">
    <input class="am-input-lg am-center" style="width: 80%" type="text" name="username" placeholder="用户名"><br>
    <input class="am-input-lg am-center" style="width: 80%" type="password" name="password" placeholder="密码"><br>
    <input class="am-btn am-btn-primary am-center" style="width: 80%;" type="submit" value="登录">
</form>
</body>
<script src="asset/js/jquery.min.js"></script>
<script src="asset/js/amazeui.min.js"></script>
<script>
$(function () {

});
</script>
</html>

5:看看amaze ui运行后的效果,使用的是谷歌浏览器的手机模拟器,右键---检查---有个手机图标点击,里面有的,如图。

QQ截图20170829143850.png


来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/2017/0829/195.html

    与本文相关的文章