Materialize快速入门教程

https://materializecss.com/

https://github.com/Dogfalo/materialize

http://www.materializecss.cn/

 

 

1，下载

http://materializecss.cn/bin/materialize-v0.97.8.zip

 

 

一般将javascript文件放在页面body标签的末端以减少页面的加载时间。

必须在materialize.js之前引入jQuery

 

在线演示示例

http://site.elesos.com/demo-web/starter-template/

颜色

每一种颜色的定义有一个基本的颜色类和一个可选的减轻或变暗的类。

背景颜色：

只需要增加颜色的名称和颜色深浅度到元素的class属性中。

 

This is a card panel with a teal lighten-2 class

 

颜色值参考Color Palette：

https://materializecss.com/color.html

 

网格:

用container类来包含我们的body内容,可以使你的页面内容居中。

 s1 表示 small-1，他的意思是 "小屏幕中的一列"。

s = small, m = medium, l = large

 

布局

 

如果有三个等宽度的div，我们定义每个div的宽度是4列，4+4+4 = 12，加起来刚好是12。

 

导航布局

 

对齐

 

动态阴影

Hoverable Card Panel

 

 

 

 

 

 

 

更多参加示例页面：

 

http://site.elesos.com/demo-web/starter-template/test.html