Materialize——扁平化卡片式网页模板
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>
调色表 http://www.materialscss.com/color
网格
Container
因为它能让你的网页内容居中。 container 的宽度大约是窗口宽度的70%，它能包裹并且居中所包裹的内容。
将网页内容放在一个包含container class的
标签中，例：
<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 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的
弹性文本：
I am Flow Text
阴影：.z-depth-2
垂直对齐：.valign-wrapper
左对齐：.left-align
右对齐：.right-align
居中对齐：.center-align
