materialize简介与安装详细介绍

2021年3月25日12:28:46 发表评论 923 次浏览

介绍: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 >

输出如下:

materialize简介与安装1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: