Materialize快速入门教程
https://github.com/Dogfalo/materialize
1，下载
http://materializecss.cn/bin/materialize-v0.97.8.zip
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
一般将javascript文件放在页面body标签的末端以减少页面的加载时间。
必须在materialize.js之前引入jQuery
在线演示示例
http://site.elesos.com/demo-web/starter-template/
颜色
每一种颜色的定义有一个基本的颜色类和一个可选的减轻或变暗的类。
背景颜色：
只需要增加颜色的名称和颜色深浅度到元素的class属性中。
<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
颜色值参考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。
导航布局
对齐
动态阴影 <div class="card-panel hoverable"> Hoverable Card Panel</div>
更多参加示例页面：
http://site.elesos.com/demo-web/starter-template/test.html
Materialize快速入门教程的更多相关文章
- 专为设计师而写的GitHub快速入门教程
专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li 原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...
- EntityFramework6 快速入门教程
EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...
- Apple Watch开发快速入门教程
Apple Watch开发快速入门教程 试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...
- 指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程
指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程 1.4.2 指示灯组 指示灯组的放大图如图1.5所示. 图1.5 指示灯组 各个指示灯对应的功能如下: q RX:对应于0号端口, ...
- 游戏控制杆OUYA游戏开发快速入门教程
游戏控制杆OUYA游戏开发快速入门教程 1.2.2 游戏控制杆 游戏控制杆各个角度的视图,如图1-4所示,它的硬件规格是本文选自OUYA游戏开发快速入门教程大学霸: 图1-4 游戏控制杆各个角度的 ...
- Query 快速入门教程
Query 快速入门教程 http://www.365mini.com/page/jquery-quickstart.htm#what_is_jquery jquery常用方法及使用示例汇总 http ...
- Realm for Android快速入门教程
介绍 如果你关注安卓开发的最新趋势,你可能已经听说过Realm.Realm是一个可以替代SQLite以及ORMlibraries的轻量级数据库. 相比SQLite,Realm更快并且具有很多现代数据库 ...
- CMake快速入门教程-实战
http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/ http://blog.csdn.net/dbzhang800/article/detai ...
- .NET Core 快速入门教程
.NET Core 快速学习.入门系列教程.这个入门系列教程主要跟大家聊聊.NET Core的前世今生,以及Windows.Linux(CentOS.Ubuntu)基础开发环境的搭建.第一个.NET ...
随机推荐
- java的跳转和重定向，加载显示层
HttpServltRequest req, HttpDervletResponse resp 的 req.sendRedirect('页面');跳转到页面 浏览器地址跳转 --------- ...
- Android4.1（Jelly Bean）API新特性尝鲜
原文:http://android.eoe.cn/topic/android_sdk Android 4.1 APIs (API Level: 16)http://developer.android. ...
- 高效开发iOS系列 -- 那些不为人知的KVC
我的简书地址:http://www.jianshu.com/p/a6a0abac1c4a valueForKeyPath 本篇来解说一下那些不为人知,也常常被忽略掉,而且非常有用的KVC干货小技巧 获 ...
- Sql Server删除数据表中重复记录 三种方法
本文介绍了Sql Server数据库中删除数据表中重复记录的方法. ［项目］数据库中users表,包含u_name,u_pwd两个字段,其中u_name存在重复项,现在要实现把重复的项删除!［分析］1 ...
- golang gc 优化思路以及实例分析
一个即将上线的go 写的高频服务,压测的时候发现 gc 特别高,高到10%-15% 左右了,本文记录下优化 gc 的过程和和思路.线上环境1.10. 首先,查看gc 是否有异常,我们可以使用 gctr ...
- iptables防火墙与日志系统配合使用 监控服务器特点端口的防问源IP
/etc/sysconfig/iptables -A INPUT -p tcp --dport 80 -j LOG --log-level 5 --log-prefix "PORT_80:& ...
- cannot send list of active checks to [ZabbixServerIp]: host [Zabbix server] not found
解决办法 因为web端上被监控端的主机名和zabbix_agentd.conf中的Hostname名字不一样,改为一样的即可 注意发现问题一定要看日志: tail -f /var/log/zabbix ...
- sessionStorage 、localStorage、cookie
特性 cookie localStorage sessionStorage 存储 浏览器端,同源限制 浏览器端,同源限制 浏览器端,同源限制 容量 <=4K 5 ...
- Linux查看系统cpu个数、核心书、线程数
现在cpu核心数.线程数越来越高,本文将带你了解如何确定一台服务器有多少个cpu.每个cpu有几个核心.每个核心有几个线程. 工具/原料 Linux服务器 方法/步骤 查看物理cpu个数 grep ...
- 多媒体文件格式解析之MP3
音频文件格式MP3 1. MP3是什么? MP3是MPEG-1 Audio Layer 3的缩写,是当今较流行的一种数字音频编码和有损压缩格式,它设计用来大幅度地降低音频数据量,而对于大多数用户的听觉 ...