1安装HBuilder5.0.0,安装后的界面截图例如以下：

2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明，创建上图的Boilerplate.html：

3 代码内容例如以下：

<!--

作者：XXX@qq.com

时间：2015-08-02

描写叙述：使用MUI。您能够先简单地直接将以下CSS和JS加入到您的HTML文档中：

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

MUI的CSS样式表定义了helper类，可用于布局和UI组件（比如按钮和表格）。

MUI的JS文件自己主动检測是否MUI的HTML已被插入到DOM和增强交互元素。如按钮、

表单和下拉列表。

您能够在这个文档找到全部可用的MUI元素的列表以及HTML样例。

以下是：HTML5演示样例：

MUI已经包括了Normalize.css，所以您能够将MUI的CSS作为您的项目的基础样式表。

看看以下这个演示样例：

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- load MUI -->

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

<script>

window.addEventListener('load',function(){

//add button dynamically

var buttonEl = document.createElement('button');

buttonEl.className = 'mui-btn mui-btn-primary mui-btn-raised';

buttonEl.innerHTML = 'My dynamic button';

document.body.appendChild(buttonEl);

});

</script>

</head>

<body>

<!--

为了使框架easy被使用，MUI使用CSS3特性来检測是否MUI组件被加入到DOM和自己主动附加事件处理程序。这里有

一个动态创建按钮的样例，支持自己主动连锁反应：

-->

</body>

</html>

4 点击菜单条中的发行,然后选择一个浏览器。

5 执行后的效果例如以下：

==========================================================================

1 自己定义字体演示样例

为了给开发者全然控制的能力，MUI不使用@import或下载不论什么外部文件。

因此，假设你想使用谷歌Roboto字体(或不论什么其它自己定义字体)必须显式地将其加入到页面，并通过CSS配置。

当您安装了一个自己定义字体，一定要确认字体的粗细/样式是否为MUI提供的參数。若不是请改动：300,400,400italic,500,600,700.

以下的HTML能够用来设置MUI和谷歌Roboto字体(命名为Demo03.html)：

<!doctype <html>

<head>

<title></title>

<meta charset="utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<!--

作者：XX@qq.com 涂作权

时间：2015-08-03

描写叙述：load custom font

-->

<link href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700" rel="stylesheet" type="text/css"/>

<!--

作者：XXX@qq.com 涂作权

时间：2015-08-03

描写叙述：load MUI

-->

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

<!--

作者：XXX@qq.com 涂作权

时间：2015-08-03

描写叙述：custom font css

-->

<style>

body {

font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;

}

</style>

</head>

<body>

<!--

作者：XXX@qq.com 涂作权

时间：2015-08-03

描写叙述：content goes here

-->

<h1>Demo arigato,Mr.Roboto</h1>

</body>

</html>

执行结果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" border="0" v:shapes="图片_x0020_4" alt="" />

==========================================================================

1 图标字体演示样例

图标字体是向网页加入图标的好顶赞的方法。

尽管MUI不包括不论什么图标字体，但您能够选择使用开源字体图标包，这里有一个使用Font Awesome图标字体的页面的演示样例：

编写Demo04.html,代码例如以下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- load icon font -->

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<!-- load MUI -->

<link href="//cdn.muicss.com/mui-0.1.19/css/mui.min.css" rel="stylesheet" type="text/css" />

<script src="//cdn.muicss.com/mui-0.1.19/js/mui.min.js"></script>

</head>

<body>

<!-- content goes here -->

<i class="fa fa-globe"></i> Hello, world!

</body>

</html>

执行效果：

01_MUI之Boilerplate中：HTML5演示样例，动态组件，自己定义字体演示样例，自己定义字体演示样例，图标字体演示样例的更多相关文章

  1. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  2. Javascript中的词法作用域、动态作用域、函数作用域和块作用域（四）

    一.js中的词法作用域和动态作用域      词法作用域也就是在词法阶段定义的作用域,也就是说词法作用域在代码书写时就已经确定了.       js中其实只有词法作用域,并没有动态作用域,this的执 ...

  3. WKWebView中HTML5获取位置失败

    WKWebView中HTML5获取位置失败,在info.plist文件中添加以下代码打开网页时就会询问是否允许获取位置信息了. <key>NSLocationAlwaysUsageDesc ...

  4. 在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在WePY的组件化开发过程中，A组件只会影响到A所绑定的myclick

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  6. Android中适用于ListView、GridView等组件的通用Adapter

    今天随便逛逛CSDN,看到主页上推荐了一篇文章Android 高速开发系列 打造万能的ListView GridView 适配器,刚好这两天写项目自己也封装了相似的CommonAdapter,曾经也在 ...

  7. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  8. 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  9. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

随机推荐

  1. Linux定时器工具

    要使用crontab定时器工具,必须要启动cron服务: service cron start crontab的语法,以备日后救急 参见:http://blog.csdn.net/zlzlei/art ...

  2. android安卓系统上运行jar文件

    原文链接: http://blog.sina.com.cn/s/blog_658c8cea0101mdhp.html 步骤如下: 1. 将文件打包成可执行jar文件(可在eclipse里export) ...

  3. PowerShell 获取Site Collection下被签出的文件

    由于权限的设置,当文件被签出时导致别人不可见了,这对校验文件个数的人来说着实是件烦恼的事.幸好利用PowerShell,可以获取Site Collection下被签出的文件. Resolution A ...

  4. Shell脚本开发规范

    一.前言 由于工作需要,最近重新开始拾掇shell脚本.虽然绝大部分命令自己平时也经常使用,但是在写成脚本的时候总觉得写的很难看.而且当我在看其他人写的脚本的时候,总觉得难以阅读.毕竟shell脚本这 ...

  5. pascalVOC 标注文件，解析为TXT

    首先,读取所有xml文件完整路径,写入train.txt 文本文档中, 然后读取TXT文档,逐行读取xml文档,建文件夹,用于保存解析好的TXT,写入TXT时,只需要保存类别名和坐标信息即可,中间用T ...

  6. Matlab中classperf对象各属性解释[原创]

    1.ClassLabels:类型标识.第一个label作为pos,第二次label作为neg. 2.GroundTruth:各次实验的观察值,也就是真实值. 3.ValidationCounter: ...

  7. unity, ugui toggle, dynamic bool

    假设Canvas_debugControl.cs有一个函数 public void showNextSceneButton(bool value){ ... } 欲将其添加到一个ugui toggle ...

  8. MySQL与Oracle的区别之我见

    1. 大的方面(宏观) Oracle为商用数据库,行业中占据相当的地位:市场占比2012年为40%.开发.管理资源相当丰富,有自己的metalink,我也曾用过,有什么问题,都能在那里得到较快速度的解 ...

  9. mysql SQLyog导入csv数据失败怎么办？

    分享下mysql使用SQLyog导入csv数据失败的解决方法 给mysql导入数据,选中某个表选择导入--导入使用本地csv数据即可,单有的时候不知道什么问题导入不成功!!! 给mysql导入数据,使 ...

  10. Atitti 过程导向 vs 结果导向 attilax的策略

    Atitit  世界著名零食 1.1. /////milk hand candy , milk soft candy . fruit soft candy1 1.2. ==========cookie ...