Materialize

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

下载

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

CSS

颜色

背景色

<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>

文本颜色

 <div class="card-panel">
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>

</div>

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

网格

Container

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

<body>
    <div class="container">
      <!-- Page Content goes here -->
    </div>
  </body>

12列

<div class="row">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>

偏移

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

<div class="row">
    <div class="col s12 grid-example"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
    <div class="col s6 offset-s6 grid-example"><span class="flow-text">6-columns (offset-by-6)</span></div>
  </div>

响应式布局

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

<!-- Navbar goes here -->

<!-- Page Layout here -->
<div class="row">

  <div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
  <!-- 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  -->

  </div>

  <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
  <!-- 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  -->

  </div>

</div>

图片

响应式图片

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

<img class="responsive-img" src="cool_pic.jpg">

圆形图片

使用 class="circle"

  <div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel grey lighten-5 z-depth-1">
  <div class="row valign-wrapper">
    <div class="col s2">
      <img src="images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
    </div>
    <div class="col s10">
      <span class="black-text">
        This is a square image. Add the "circle" class to it to make it appear circular.
      </span>
    </div>
  </div>
</div>

</div>

视频

响应式内嵌

<div class="video-container">
    <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>

响应式视频

 <video class="responsive-video" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>

排版

引用：<blockquote>这是一个用了blockquote的</blockquote>
弹性文本：<p class="flow-text">I am Flow Text</p>
阴影：.z-depth-2
垂直对齐：.valign-wrapper
左对齐：.left-align
右对齐：.right-align
居中对齐：.center-align

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