开发者社区> 涂作权> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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/CSS/JS微信公众号展示页面模板
基于HTML/CSS/JS微信公众号展示页面模板
150 0
基于HTML/CSS/JS的动态元素周期表
基于HTML/CSS/JS的动态元素周期表
182 0
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
101 0
简明 HTML CSS 开发规范
简明 HTML CSS 开发规范 作者:wjack    文章来源:蓝色理想//总论本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。
705 0
4款Windows下的免费HTML&CSS编辑器
导读:今天向大家介绍4款Windows下的免费HTML & CSS编辑器,以下是文章内容: 1. Notepad2 Notepad2是Windows下最流行的应用工具之一,是一个快速,轻量级,简洁的应用程序。
952 0
介绍html CSS和JS的定义或引用
现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) 。 浏览器解析原理 服务器接收到HTML->解析HTML结构建DOM树->解析CSS构建渲染树->为渲染树生成布局->绘制渲染树;在构建DOM树的同时,如果有JS,同时调用JS引擎解析。
1018 0
6种编写HTML和CSS的最有效的方法
译文出自:开源中国社区
545 0
+关注
涂作权
java,架构,编程语言相关专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
FLINK在大规模实时无效广告流量检测中的应用
立即下载
天猫 HTML5 互动技术实践
立即下载
《企业全面上云成功路径与实践》
立即下载