![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
文章平均质量分 83
汪星人来地球
这个作者很懒,什么都没留下…
展开
-
Material Design Lite 学习(三) 网格
上一篇博文介绍了MDL页面的布局。这篇博文主要介绍MDL页面中元素的布局。在MDL的设计中,根据设备的不同,会将页面的每一行划分成若干个列。具体来说,PC页面一行12列,平板一行8列,手机一行4列。MDL为这些列预定了边距(margin)。HTML页面中的每个元素都可以被定义成一个单元格类(mdl-cell)。每个单元格可以占用若干列。这些单元格按照从左到右,从上到下的顺序依次排列这些单元格。需要原创 2016-10-25 15:46:07 · 906 阅读 · 0 评论 -
material design lite学习(七)按钮
在MDL中定义了各种style的按钮。本博文通过一些的例子,介绍这些按钮的设置和使用方法。1. 默认的mdl按钮 确定 确定 上面的代码定义了两个默认的mdl按钮。默认的mdl按钮需要给button标签添加两个css类。其中mdl-button类定理最基本的按钮特性,而mdl-js-butt原创 2016-11-08 20:19:04 · 1430 阅读 · 0 评论 -
Material Design Lite学习(一) 概述及环境搭建
概述Material Design Lite (MDL)是使用JavaScript, CSS和HTML编写的UI组件库。它的设计灵感来源于Google的Material Design。它们的区别在于Material Design是应用于android app的界面开发,而MDL是应用于网页开发。事实上,使用MDL设计出来的web界面和使用Material Degsign设计出来的android ap翻译 2016-10-19 14:14:53 · 3720 阅读 · 0 评论 -
material design lite学习(五)选项卡
本文介绍MDL页面的选项卡布局。这部分内容比较简单,直接看示例代码。 选项卡1 选项卡2 选项卡3 选项卡1的内容原创 2016-10-31 21:21:30 · 1043 阅读 · 0 评论 -
material design lite定义的图标总结
动作类警告类媒体类通信类内容类设备类编辑类文件类硬件类图像类地图类导航类通知类场所类社交类切换类翻译 2016-11-01 18:34:22 · 1511 阅读 · 0 评论 -
Material Design Lite学习(二) 布局
上一篇博客介绍了如何创建MDL web页面。本篇博客将介绍MDL页面的布局。通常一个标准的MDL页面定义如下。 MDL 示例 当然,上面的代码会定义一个空的HTML页面。为了在页面中显示相关原创 2016-10-21 19:58:48 · 1446 阅读 · 0 评论 -
Material Design Lite学习(四) 网格(续)
本文接上一篇博客,继续介绍一些MDL网格(Grid)布局的手段。1. 消除单元格间隙在默认的mdl-grid类中,它内部的单元格之间会有一定的间隙(margin)。有时候,我们在布局时,可能不希望出现这样的间隙。此时可以做如下设置。 单元格1 单元格2原创 2016-10-28 14:18:37 · 729 阅读 · 0 评论 -
material design lite学习(六)图标
前几篇博t文的次序几乎都遵循官方提供的MDL教程的次序。但是这一篇博文,却准备打乱次序,首先介绍图标。因为在后续介绍的按钮和徽章元素中,都需要用到图标。目前,material design设计了一系列的图标,可以同时被android app和web页面所使用。这些图标覆盖面极其广泛,可以满足我们绝大部分的界面开发需求。博文 material design lite定义的图标总结对materia原创 2016-11-05 17:10:33 · 607 阅读 · 0 评论