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 29 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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新手上路(十一)
2006/10/09 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python实现简单登录验证
2016/04/13 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
班组拓展活动方案
2014/08/14 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
文艺演出主持词
2015/07/01 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
React更新渲染原理深入分析
2022/12/24 Javascript