codecamp

排版

相关资源

Material Design 排版设计规范


字体排版

下面是一些基本的排版样式:

www.mdui.org - 排版 - 字体排版

在线运行


在上面的样式类名后添加 -opacity 即可使这些样式拥有适当的不透明度:

www.mdui.org - 排版 - 带不透明度的字体排版

在线运行


内容排版

MDUI 除了使用 Normalize.css 和设置 body 元素的字体和颜色外,没有直接对其他 HTML 元素的样式做出修改。

要使元素拥有排版优化后的样式,需要在这些元素的父元素上添加类 .mdui-typo


标题

www.mdui.org - 排版 - 标题

在线运行


在标题内还可以包含 small 标签来标记副标题。

www.mdui.org - 排版 - 副标题

在线运行


内联文本样式

www.mdui.org - 排版 - 内联文本样式

在线运行


水平分割线

www.mdui.org - 排版 - 水平分割线

在线运行


引用

www.mdui.org - 排版 - 引用

在线运行


代码块

www.mdui.org - 排版 - 代码块
在线运行


无序列表

www.mdui.org - 排版 - 无序列表

在线运行


有序列表

www.mdui.org - 排版 - 有序列表

在线运行


文章排版示例

为文章内容的父容器添加 .mdui-typo 类,就能为整篇文章添加预定的样式。

www.mdui.org - 排版 - 中文文章排版示例

www.mdui.org - 排版 - 英文文章排版示例


CSS 类名列表

 类名 效果
 .mdui-typo-display-4 Display 4 样式
 .mdui-typo-display-3 Display 3 样式
 .mdui-typo-display-2 Display 2 样式
 .mdui-typo-display-1 Display 1 样式
 .mdui-typo-headline Headline 样式
 .mdui-typo-title Title 样式
 .mdui-typo-subheading Subheading 样式
 .mdui-typo-body-2 Body 2 样式
 .mdui-typo-body-1 Body 1 样式
 .mdui-typo-caption Caption 样式
 .mdui-typo-display-4-opacity  带不透明度的 Display 4 样式
 .mdui-typo-display-3-opacity 带不透明度的 Display 3 样式
 .mdui-typo-display-2-opacity 带不透明度的 Display 2 样式
 .mdui-typo-display-1-opacity 带不透明度的 Display 1 样式
 .mdui-typo-headline-opacity 带不透明度的 Headline 样式
 .mdui-typo-title-opacity 带不透明度的 Title 样式
 .mdui-typo-subheading-opacity 带不透明度的 Subheading 样式
 .mdui-typo-body-2-opacity 带不透明度的 Body 2 样式
 .mdui-typo-body-1-opacity 带不透明度的 Body 1 样式
 .mdui-typo-caption-opacity 带不透明度的 Caption 样式
 .mdui-typo 为该元素内的元素赋予排版后的样式


网格布局
图标
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }