amaze ui 的使用详细教程


Posted in HTML / CSS onAugust 19, 2020

今天老师给我讲解了amaze ui的使用,在此与大家分享我的学习笔记。amaze ui的官网虽然已经提供了具体的实现步骤,但是对于没有前台开发经验的我,理解起来还是很有困难的。

引言

一个前台页面的开发一般需要html、css、javascript三种技术的支持,amazui ui对一些css、js进行了封装,是其可供用户直接调用。

使用方法

amaze ui的使用通常有两种方式:css、js文件复制到项目中;采用cdn方式。(在开发过程中采用第一种方式;开发结束需要部署时,采用第二种方式。

具体解释见附录1)

方法一

1.将amaze ui对应的zip下载。

解压后查看该文件夹下的问assets文件,assets文件夹下又包括css、js文件夹,这两个文件就是amaze ui中封装,可供用用户直接使用的样式。

2.把上述提到的css、js文件夹拷贝到web项目的WebRoot下。

3.在项目中对样式进行使用。

注:使用hbuilder开发非常便捷。

amaze ui 的使用详细教程

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello amazeui</title>
</head>
<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<body>
  <button class="am-btn-primary am-btn-block " >aaa</button>
</body>
</html>

方法二

在官网上获取js和css对应的地址,将他们引入到js中。但是使用amaze ui的js,需要jquery的支持,所以需要将其导入,导入次序要在js之前。

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8" />
     <title></title  >
     <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css"/>
     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
     <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>
	</head>
	<body>
	<button <span style="color:#ff0000;">class</span>="am-btn" value="aa">		
	</button>
	</body>
</html>

我们在class中使用amaze ui已经封装好的格式。

附录1

在开发过程中,使用的是hbuilder这个工具,如果将amaze ui的css、js导入到项目中,开发过程中工具本身会有提示;但是,当用户访问该网页时,每次都会请求本地的css和js资源,会增加部署该项目的服务器的负担。因此为了避免第二项问题,我们在部署项目时会改变成第二种方式。

总结

到此这篇关于amaze ui 的使用详细教程的文章就介绍到这了,更多相关amaze ui 的使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
AmazeUI中模态框的实现
Aug 19 #HTML / CSS
Ratchet 模态框的实现
Aug 19 #HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 #HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 #HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 #HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 #HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 #HTML / CSS
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
vue获取dom元素注意事项
2017/12/28 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基础教程之Hello World!
2014/08/29 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python文件及目录操作实例详解
2015/06/04 Python
python实现分页效果
2017/10/25 Python
Python实现通讯录功能
2018/02/22 Python
python实现zabbix发送短信脚本
2018/09/17 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python cumsum函数的具体使用
2019/07/29 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
房地产开发项目建议书
2014/05/16 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
分享7个 Python 实战项目练习
2022/03/03 Python