Materialize——扁平化卡片式网页模板

Materialize

官网:http://www.materialscss.com/

下载

http://pan.baidu.com/s/1kUUX2Vt

CSS

颜色

背景色

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

文本颜色

This is a card panel with dark blue text

调色表 http://www.materialscss.com/color

网格

Container

因为它能让你的网页内容居中。 container 的宽度大约是窗口宽度的70%，它能包裹并且居中所包裹的内容。
将网页内容放在一个包含container class的

标签中，例：

12列

1

2

3

4

5

6

7

8

9

10

11

12

偏移

添加 offset-s2 class就可以达到偏移的目的， s 意味着屏幕尺寸 (s = small, m = medium, l = large)，数字代表你想应用的偏移量。

This div is 12-columns wide on all screen sizes

6-columns (offset-by-6)

响应式布局

表格	手机	平板	电脑
前缀	.s	.m	.l
列数	85%	85%	70%
宽度	12	12	12

<!-- Grey navigation panel

This content will be:
3-columns-wide on large screens,
4-columns-wide on medium screens,
12-columns-wide on small screens -->

<!-- Teal page content

This content will be:
9-columns-wide on large screens,
8-columns-wide on medium screens,
12-columns-wide on small screens -->

图片

响应式图片

为了响应式地处理图片大小，添加 responsive-img 到img标签中就可以。原理是它定义了 max-width: 100% 和 height:auto两个属性。

圆形图片

使用 class="circle"

This is a square image. Add the "circle" class to it to make it appear circular.

视频

响应式内嵌

响应式视频

排版

引用：

这是一个用了blockquote的

弹性文本：

I am Flow Text

阴影：.z-depth-2
垂直对齐：.valign-wrapper
左对齐：.left-align
右对齐：.right-align
居中对齐：.center-align