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
最新文章
- 测序深度和覆盖度(Sequencing depth and coverage)
- 分享:linux下apache服务器的配置和管理
- BZOJ2661: [BeiJing wc2012]连连看
- 在 VS14 上安装 Visual F# Power Tools
- No.2小白的HTML+CSS心得篇
- spell checking
- 前端MVC框架之 Angular
- SSH程序框架的整合(1)
- HTML DOM 访问2
- 在Windows下使用Git+TortoiseGit+码云管理项目代码
- 【论文速读】ChengLin_Liu_ICCV2017_Deep_Direct_Regression_for_Multi-Oriented_Scene_Text_Detection
- Git 几个常用操作
- zabbix http服务监控实例
- IIS多个应用程序共享Session
- JQuery中serialize()方法的使用
- 基于RYU的拓扑发现
- 在ZP的HA模式下 JM 重启失败
- jenkins中windows节点设置开机自启动slave-agent
- Java reflect 反射 1
- CentOS下Supervisor的安装与使用入门
热门文章
- JQuery Tree插件——zTree
- zookeeper 的日常管理
- Error:Cause: org/gradle/api/publication/maven/internal/DefaultMavenFactory Android
- eclipse 安装properties编辑器,显示中文
- 生产机器禁止ROOT远程SSH登录
- rpm 安装zabbix 注意
- https://jzh.12333sh.gov.cn/jzh/
- 每天一个linux命令(5):in命令
- Android下基于SDL的YUV渲染
- 【转载】一个Sqrt函数引发的血案