开发者社区> 涂作权> 正文

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

简介:  1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的Boilerplate.html: 3 代码内容如下: <!--          作者:XXX@qq.com          时间:2015-08-02
+关注继续查看


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,您可以先简单地直接将以下CSSJS加入到您的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>

 

               MUICSS样式表定义了helper类,可用于布局和UI组件(例如按钮和表格)。

               MUIJS文件自动检测是否MUIHTML已被插入到DOM和增强交互元素,如按钮、

                    表单和下拉列表。您可以在这个文档找到所有可用的MUI元素的列表以及HTML例子。

   下面是:HTML5示例:

         MUI已经包含了Normalize.css,所以您可以将MUICSS作为您的项目的基础样式表。

                  看看下面这个示例:

-->

<!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>

运行效果:

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html文件里怎么引用vue组件?
html文件里怎么引用vue组件?
31 0
uiu
【Svelte】-(1)基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签
【Svelte】-(1)基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签
78 0
语义化 HTML 编写一个原生 Web Components 组件
使用语义化 HTML 编写一个原生 Web Components 组件
110 0
resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传
resumable.js是一个 JavaScript 库,通过 HTML5 文件 API 提供了稳定和可恢复的批量上传功能。在上传大文件的时候将文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。由于采用了分块技术,它也允许用户暂停和恢复上传。
396 0
HTML5文件上传组件的深度剖析
对于文件上传,相信还有不少同学还停留在FLASH时代,其实现在 HTML5 不仅可以实现文件上传,而且可以做得更好。 以下是对 HTML5 与 FLASH 就文件上传方面的功能调研测试得出的结果。
147 0
HTML原生组件
本文转载自水墨寒的博客
1773 0
微信小程序的组件用法与传统HTML5标签的区别
小程序与传统HTML5的区别 小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。
1431 0
+关注
涂作权
java,架构,编程语言相关专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载