1安装hbuilder5.0.0,安装后的界面截图如下：
3 代码内容如下：
<!--
时间：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>
<!--
为了使框架容易被使用，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>
<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" />
作者：[email protected] 涂作权
时间：2015-08-03
描述：load custom font
<link href="//fonts.googleapis.com/css?family=roboto:300,400,400italic,500,700" rel="stylesheet" type="text/css"/>
<!--
作者：[email protected] 涂作权
描述：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>
<!--
描述：custom font css
<style>
body {
font-family: "roboto", "helvetica neue", helvetica, arial;
}
</style>
描述：content goes here
<h1>demo arigato,mr.roboto</h1>
运行结果：
1 图标字体示例
图标字体是向网页添加图标的好顶赞的方法。虽然mui不包括任何图标字体，但您可以选择使用开源字体图标包，这里有一个使用font awesome图标字体的页面的示例：
编写demo04.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>
运行效果：