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 相关文章推荐
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 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
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
JS控制表格隔行变色
2006/06/26 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
js仿360开机效果
2019/12/26 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
详解python中requirements.txt的一切
2017/03/03 Python
Windows下python3.6.4安装教程
2018/07/31 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python字符串判断密码强弱
2020/03/18 Python
Python PIL库图片灰化处理
2020/04/07 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
中职应届生会计求职信
2013/10/23 职场文书
2013英文求职信模板范文
2013/11/15 职场文书
企业内控岗位的职责
2014/02/07 职场文书
小学新学期寄语
2014/04/02 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
三八妇女节主持词
2015/07/04 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android