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图片侧翻倾斜效果
Apr 16 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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+mysql 实现身份验证代码
2010/03/24 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php实现上传图片文件代码
2015/07/19 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python实现简单的语音识别系统
2017/12/13 Python
Django 多环境配置详解
2019/05/14 Python
python向图片里添加文字
2019/11/26 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
办理暂住证介绍信
2014/01/11 职场文书
结婚周年感言
2014/02/24 职场文书
股东合作协议书
2014/04/14 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
酒店员工培训方案
2014/06/02 职场文书
2015党建工作简报
2015/07/21 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python