介绍：Materialize是一种将成功设计的经典原理与创新和技术结合在一起的设计语言。 Materialize由Google创建和设计。 Google的目标是开发一种设计系统, 以便在任何平台上的所有产品中实现统一的用户体验。
为什么要使用materialize？
- 它更易于使用。
- 它使网页变得动态和响应。
- 它使网页与移动设备, 平板电脑, 笔记本电脑也兼容。
- 免费提供materializecss.com
materialize主要包括三个部分：
- HTML
- CSS
- Java脚本
基本HTML模板：
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title >Learning Materialize</ title >
< meta name = "description" content = "Hello World" >
</ head >
< body >
< div > Hello World!</ div >
< div > You're learning Materialize on lsbin.org</ div >
</ body >
</ html >安装实现：有两种安装Materialize的方法。
方法1：
复制链接并在HTML模板上添加头部。
<!-- Compiled and minified CSS -->
< link rel = "stylesheet"
href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" >
</ script >方法2：
使用materialize入门模板。
<!DOCTYPE html>
< html >
< head >
<!--Import Google Icon Font-->
< link href = "https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" >
<!--Import materialize.css-->
< link type = "text/css"
rel = "stylesheet"
href = "css/materialize.min.css"
media = "screen, projection" />
< link rel = "stylesheet"
href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" >
</ script >
<!--Let browser know website is optimized for mobile-->
< meta name = "viewport"
content=" width = device -width, initial-scale = 1 .0" />
</ head >
< body >
< div > Hello World!</ div >
< div > You're learning Materialize on lsbin.org</ div >
<!--JavaScript at end of body for optimized loading-->
< script type = "text/javascript" src = "js/materialize.min.js" ></ script >
</ body >
</ html >输出如下：
