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制作精致的照片墙特效
Jun 07 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 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
大师制作的中短波矿石收音机
2020/04/02 无线电
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
php array_map()函数实例用法
2021/03/03 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
js编写简易的计算器
2020/07/29 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
python实现简易数码时钟
2021/02/19 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python执行时间的几种计算方法
2020/07/31 Python
opencv实现图像平移效果
2021/03/24 Python
2014年巴西世界杯口号
2014/06/05 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
django上传文件的三种方式
2021/04/29 Python
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
Go语言 详解net的tcp服务
2022/04/14 Golang
springboot读取nacos配置文件
2022/05/20 Java/Android