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

图片

响应式图片

为了响应式地处理图片大小，添加 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