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>
执行结果：
==========================================================================
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>
执行效果：
