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实现Material Design效果
Mar 09 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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性能优化的介绍
2013/06/20 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
React中jquery引用的实现方法
2017/09/12 jQuery
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
vue实现搜索功能
2019/05/28 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python类继承用法实例分析
2015/05/27 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python基于property()函数定义属性
2020/01/22 Python
python实现飞行棋游戏
2020/02/05 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
教师演讲稿开场白
2014/08/25 职场文书
授权委托书样本
2014/09/25 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
解析MySQL索引的作用
2022/03/03 MySQL