AmazeUI的下载配置与Helloworld的实现


Posted in HTML / CSS onAugust 19, 2020

虽然这东西号称跨平台支持浏览器,但建议还是不要使用这个前端框架开发PC端的网页,因为这东西不支持IE8以下的浏览器。在PC上不兼容IE6的话,基本可以抛弃了。AmazeUI仅仅用来做移动端的网页还是不错的,其HTML5的特性等很符合手机浏览器的特点。不要妄想能写出一个网页同时兼容PC与手机,应该分开布局。君不见在很多手机版网页的底部有“手机版”与“电脑版”之分吗?

1、这东西直接在AmazeUI的官网(点击打开链接)中下载,打开官网之后,选择“开始使用”->然后在“获取 Amaze UI”一栏中“Amaze UI v2.3.0”

AmazeUI的下载配置与Helloworld的实现 

2、下载之后,之后解压,把里面的assets拖到你手机版的站点目录。

AmazeUI的下载配置与Helloworld的实现

3、新建一个Helloworld.html,你的站点目录应该如下图:

AmazeUI的下载配置与Helloworld的实现

4、在Helloworld.html写入如下的代码,然后使用Google浏览器、野狐禅等支持手机版网页调试的浏览器,打开Helloworld.html,以下的网页对比与官网的Helloworld.html例子,删除不少的没意义的外部文件引用。

<!--使用HTML5开发-->
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--自动适应移动屏幕-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!--优先使用webkit内核渲染-->
        <meta name="renderer" content="webkit">
        <!--不要被百度转码-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <!--以下才是引入amazeui资源-->
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <script src="assets/js/jquery.min.js"></script>
        <title>Hello Amaze UI</title>
    </head>
	<body>
    	<h1>Hello Amaze UI.</h1>
        <button type="button" class="am-btn am-btn-default">默认样式</button>
        <button type="button" class="am-btn am-btn-primary">主色按钮</button>
        <button type="button" class="am-btn am-btn-secondary">次色按钮</button>
        <button type="button" class="am-btn am-btn-success">绿色按钮</button>
        <button type="button" class="am-btn am-btn-warning">橙色按钮</button>
        <button type="button" class="am-btn am-btn-danger">红色按钮</button>
        <button type="button" class="am-btn am-btn-danger am-round">圆角红色按钮</button>
		<a class="am-btn am-btn-link">链接</a>
	</body>
</html>

则得到如下的效果:

AmazeUI的下载配置与Helloworld的实现

到此这篇关于AmazeUI的下载配置与Helloworld的实现的文章就介绍到这了,更多相关AmazeUI下载配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3隔行变换色实现示例
Feb 19 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 #HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 #HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 #HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 #HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 #HTML / CSS
amazeui时间组件的实现示例
Aug 18 #HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 #HTML / CSS
You might like
多重?l件?合查?(二)
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
极简的Python入门指引
2015/04/01 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python Django框架实现自定义表单提交
2016/03/25 Python
python2.7安装图文教程
2018/03/13 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python实现飞机大战微信小游戏
2020/03/21 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
学年自我鉴定范文
2013/10/01 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
小学开学寄语
2014/01/19 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers