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> <!-- 为了使框架容易被使用，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> |
运行效果：