當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2024/9/27 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1安裝HBuilder5.0.0,安裝后的界面截圖如下：

2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的說(shuō)明，創(chuàng)建上圖的Boilerplate.html：

3 代碼內(nèi)容如下：

<!--

???????? 作者：XXX@qq.com

???????? 時(shí)間：2015-08-02

???????? 描述：使用MUI，您可以先簡(jiǎn)單地直接將以下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類(lèi)，可用于布局和UI組件（例如按鈕和表格）。

???????? ????? MUI的JS文件自動(dòng)檢測(cè)是否MUI的HTML已被插入到DOM和增強(qiáng)交互元素，如按鈕、

???????? ?????????? 表單和下拉列表。您可以在這個(gè)文檔找到所有可用的MUI元素的列表以及HTML例子。

?? 下面是：HTML5示例：

???????? MUI已經(jīng)包含了Normalize.css，所以您可以將MUI的CSS作為您的項(xiàng)目的基礎(chǔ)樣式表。

????????????????? 看看下面這個(gè)示例：

-->

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

?????????????????? <!--

??????? ???????? 為了使框架容易被使用，MUI使用CSS3特性來(lái)檢測(cè)是否MUI組件被添加到DOM和自動(dòng)附加事件處理程序。這里有

??????? ???????? 一個(gè)動(dòng)態(tài)創(chuàng)建按鈕的例子，支持自動(dòng)連鎖反應(yīng)：

??????? -->

???????? </body>

</html>

4 點(diǎn)擊菜單欄中的發(fā)行,然后選擇一個(gè)瀏覽器。

5 運(yùn)行后的效果如下：

==========================================================================

1 自定義字體示例

為了給開(kāi)發(fā)人員完全控制的能力，MUI不使用@import或下載任何外部文件。因此，如果你想使用谷歌Roboto字體(或任何其他自定義字體)必須顯式地將其添加到頁(yè)面，并通過(guò)CSS配置。當(dāng)您安裝了一個(gè)自定義字體，一定要確認(rèn)字體的粗細(xì)/樣式是否為MUI提供的參數(shù)，若不是請(qǐng)修改：300,400,400italic,500,600,700.

下面的HTML可以用來(lái)設(shè)置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 涂作權(quán)

??????? ???????? 時(shí)間：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 涂作權(quán)

??????? ???????? 時(shí)間：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 涂作權(quán)

??????? ???????? 時(shí)間：2015-08-03

??????? ???????? 描述：custom font css

??????? -->

??????? <style>

??????? ???????? body {

??????? ?????????????????? font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;

??????? ???????? }

??????? </style>

???????? </head>

???????? <body>

?????????????????? <!--

??????? ???????? 作者：XXX@qq.com 涂作權(quán)

??????? ???????? 時(shí)間：2015-08-03

??????? ???????? 描述：content goes here

??????? -->

??????? <h1>Demo arigato,Mr.Roboto</h1>

???????? </body>

</html>

運(yùn)行結(jié)果：

==========================================================================

1 圖標(biāo)字體示例

圖標(biāo)字體是向網(wǎng)頁(yè)添加圖標(biāo)的好頂贊的方法。雖然MUI不包括任何圖標(biāo)字體，但您可以選擇使用開(kāi)源字體圖標(biāo)包，這里有一個(gè)使用Font Awesome圖標(biāo)字體的頁(yè)面的示例：

編寫(xiě)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>

運(yùn)行效果：

總結(jié)

以上是生活随笔為你收集整理的01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。