當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/9/27 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

???????? 描述：使用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">

??????????????????

?????????????????? <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">

???

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

運行效果：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。