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】堆排序

    堆是一种完全二叉树结构,并且其满足一种性质:父节点存储值大于(或小于)其孩子节点存储值,分别称为大顶堆.小顶堆.堆一般采用数组进行存储(从下标为0开始).则父节点位置为i,那么其左孩子为2*i + 1 ...

  2. C语言的整型溢出问题

    整型溢出有点老生常谈了,bla, bla, bla… 但似乎没有引起多少人的重视.整型溢出会有可能导致缓冲区溢出,缓冲区溢出会导致各种黑客攻击,比如最近OpenSSL的heartbleed事件,就是一 ...

  3. Linux中iptables防火墙指定端口范围

    我需要700至800之间的端口都能tcp访问 代码如下 复制代码 -A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 7 ...

  4. Web用户控件开发--星型评分控件

    本文中分享一个实现简单,使用方便的星型评分控件. 一:贴几张测试图片先: 二.星型评分控件的实现: RatingBar.ascx: <%@ Control Language="C#&q ...

  5. [转]MVC 框架教程

    Spring web MVC 框架提供了模型-视图-控制的体系结构和可以用来开发灵活.松散耦合的 web 应用程序的组件.MVC 模式导致了应用程序的不同方面(输入逻辑.业务逻辑和 UI 逻辑)的分离 ...

  6. 为什么推荐你用 Kotlin语言？

    谷歌大牛说:为什么 Kotlin 比你们用的那些垃圾语言都好 原标题:谷歌大牛说:为什么 Kotlin 比你们用的那些垃圾语言都好 编译:伯乐在线/黄小非 [伯乐在线/程序员的那些事 导读]:5月18 ...

  7. JAVA中Set集合--HashSet的使用

    一.使用HashSet添加一个String类型的值: public static void hashSet1(){ HashSet<String> hashSet = new HashSe ...

  8. 【Unity】6.4 Transform--移动、旋转和缩放游戏对象

    分类:Unity.C#.VS2015 创建日期:2016-04-20 一.简介 Unity引擎提供了丰富的组件和类库,为游戏开发提供了非常大的便利,熟练掌握和使用这些API,对于游戏开发的效率提高很重 ...

  9. python 给文件批量加‘“’ ”，"

    file = open('face.txt','r') filew = open('face1.txt','w') try: for line in file: print(line) if line ...

  10. 菜鸟教程之工具使用（一）——Git的基本使用

    Git是进来比较火的版本控制工具,大有取代svn的趋势.关于两种孰好孰坏我就不多费口舌了,网上关于二者的对比文章比比皆是.作为一个IT人员关注行业的发展动态是必须的,所以抽空研究了一下Git的使用.跟 ...