您的位置：首页 > Web前端 > HTML5

01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

2015-08-03 00:40 609 查看

1安装HBuilder5.0.0,安装后的界面截图如下：

2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明，创建上图的Boilerplate.html：3 代码内容如下：

<!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">  <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>  </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" />  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700" rel="stylesheet" type="text/css"/>  <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>  <style> body { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial; } </style> </head> <body>  <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">  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />  <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>  <i class="fa fa-globe"></i> Hello, world! </body> </html>

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航