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 ...
随机推荐
- nginx静态资源缓存与压缩
一.静态资源缓存 参考文章 (1)apache设置max-age或expires 这里需要修改.htaccess文件. <IfModule mod_headers.c> <Files ...
- 是时候用PerconaDB替换MySQL了
Percona数据库服务器是MySQL的增强版,替代MySQL并不复杂. 一.PerconaDB的特性 1)查询速度更快,数据的一致性更好 2)服务器运行及其稳定 3)可以延迟分片,或者避免分片 4) ...
- Android入门-新手如何成功创建一个Android小应用
原文:http://android.eoe.cn/topic/summary 第一课程:Building Your First App [本课内容简介]欢迎加入到安卓应用的开发大潮中!这门课程会教授你 ...
- [svc]ext4文件删除&访问原理
文件名信息存放在哪里? LINUX的文件名是存在父目录的block里面,并指向这个文件的inode节点,这个文件的inode节点再标记指向存放这个文件的block的数据块.我们删除一个文件,实际上并不 ...
- 如何从angular2中的url获取查询参数？
问题描述 我使用angular2.0.0-beta.7.当组件在像”/path?query=value1″这样的路径上加载时,它被重定向到”/path”.为什么删除了GET参数?如何保留参数? 路由器 ...
- mybatis使用注解往postgresql数据库表insert数据[主键自增]的写法
建表SQL: DROP TABLE IF EXISTS person; CREATE TABLE person( person_id serial PRIMARY KEY NOT NULL, pers ...
- openfire维持在线状态,监听消息
public static void testLoginStatus()throws XMPPException,InterruptedException { AccountManager accou ...
- Openfire注册流程代码分析
Openfire注册流程代码分析 一.客户端/服务端注册用户流程 经过主机连接消息确认后,客户端共发送俩条XML完成注册过程.服务器返回两条XML. 注:IQ消息节点用于处理用户的注册.好友.分组.获 ...
- Beginning SDL 2.0(2) TwinklebearDev SDL 2.0 Tutorial
本文整理并简要介绍了TwinklebearDev SDL 2.0 Tutorial相关内容(以下简称TDSDLTutorial). 这是作为我学习并了解SDL2.0功能一篇学习总结. TDSDLTut ...
- java中的数据结构[copy]
转自http://developer.51cto.com/art/201107/273003.htm java版数据结构与算法,希望对你有帮助. 线性表,链表,哈希表是常用的数据结构,在进行Java开 ...