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. 【Algorithm】基数排序

    一. 算法描述 基数排序(以整形为例),将整形10进制按每位拆分,然后从低位到高位依次比较各个位.主要分为三个过程: 分配,先从个位开始,根据位值(0-9)分别放到0~9号桶中(比如53,个位为3,则 ...

  2. React Native工程修改Android包名

    默认初始化的React Native工程,生成Android工程的时候,包名默认是React Native工程的名字,跟一般Android工程com.company.xxx不一样. 这时候就需要手动修 ...

  3. python 实验环境

    python 实验环境的搭建 刚开始在windows环境下尝试过komodo ,eclispse pydev,swing,spyder甚至limodou的编辑器,之后ipython,安装很多科学计算包 ...

  4. asp.net url址址中中文汉字参数传递乱码解决方法

    中文乱码是网站开发中会常碰到的问题,今天我们来讲一下关于url址址中中文汉字参数传递乱码解决方法,有需要的朋友可以参考下.在cs文件里传参的时候用UrlEncode: Response.Redirec ...

  5. Android工具类-关于网络、状态的工具类

    下方是一个很好的监测网络.状态的工具类 public class NetworkUtils { /** * 网络是否可用 * * @param activity * @return */ public ...

  6. Android Camera开发：给摄像头预览界面加个ZoomBar（附完整代码下载）

    源码:http://files.cnblogs.com/android100/StandardCamera2013-10-18.zip 废话不说了,就是加个seekbar,拖动的话能够调节焦距,让画面 ...

  7. centos安装Elasticsearch步骤

    1.安装JDK:centos删除openJDK,安装JDK,vim /etc/profile配置JAVA_HOME 2.官网下载elasticsearch:https://www.elastic.co ...

  8. WPF 控件事件的一个小坑…

    最近想判断一下 Slider 是由鼠标点击而改变值,还是由程序内部代码改变的值,发现鼠标的各种事件比如 MouseDown.MouseUp.MouseLeftButtonDown 什么的,都没有任何反 ...

  9. struts2(三) 输入校验和拦截器

    前面知道了struts2的架构图和struts2的自动封装表单参数和数据类型自动转换,今天来学struts2的第三第四个东西,输入校验和拦截器, --WH 一.输入校验 在以前我们写一个登录页面时,并 ...

  10. SQL Server中利用正则表达式替换字符串

    --如果存在则删除原有函数  IF OBJECT_ID(N'dbo.RegexReplace') IS NOT NULL       DROP FUNCTION dbo.RegexReplace  G ...