排版·字体

字体系统的构建,是『动态秩序之美』的第一步

这里是演示的正文...父容器上放个.typo 样式类就这么简单

返璞归真

身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。

双面体验

拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。

星辰大海

如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不灭的执念。如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不灭的执念。

元素 标签 字体大小 说明

页面标题

<h1> 24px 粗 在一个页面只有一个页面标题。

标题

<h2> 22px 粗 作为页面第二级标题,可能在一个页面中使用到多个二级标题。

三级标题

<h3> 18px 粗 页面第三级标题,嵌套在二级标题下使用。

四级标题

<h4> 16px 粗 页面第四级标题,嵌套在三级标题下使用。
五级标题
<h5> 14px 页面第五级标题,嵌套在四级标题下使用。
六级标题
<h6> 12px 页面第六级标题,嵌套在五级标题下使用。

这是一个段落

<p>

14px 正文中大部分由段落组成。
粗体文本 <strong> 14px 通常粗体文本用来强调内容。
小的文本 <small> 12px small文本字体只有正常字体大小的80%。
超链接 <a> 14px 超链接具有不同的颜色以区别其他文本。
  1. 这是一个有序列表
  2. 含三个列表项
  3. 作为示例
<ol><li>...</li></ol> 14px 当组织一些并列项目且关注项目之间顺序时可以使用有序列表。
  • 这是一个无序列表
  • 含三个列表项
  • 作为示例
<ul><li>...</li></ul> 14px 当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。