title: MDUI CSS框架 -排版
categories: 🥭笔记
tags: [mdui]
date: 2021-04-16 20:54:00

排版

对应代码

<div class="mdui-typo-display-4">Display 4</div>
<div class="mdui-typo-display-3">Display 3</div>
<div class="mdui-typo-display-2">Display 2</div>
<div class="mdui-typo-display-1">Display 1</div>
<div class="mdui-typo-headline">Headline</div>
<div class="mdui-typo-title">Title</div>
<div class="mdui-typo-subheading">Subheading</div>
<div class="mdui-typo-body-2">Body 2</div>
<div class="mdui-typo-body-1">Body 1</div>
<div class="mdui-typo-caption">Caption</div>

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

总示例：

内容排版

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

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

副标题

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

<div class="mdui-typo">
  <h1>h1 标题 heading <small>副标题 Secondary text</small></h1>
  <h2>h2 标题 heading <small>副标题 Secondary text</small></h2>
  <h3>h3 标题 heading <small>副标题 Secondary text</small></h3>
  <h4>h4 标题 heading <small>副标题 Secondary text</small></h4>
  <h5>h5 标题 heading <small>副标题 Secondary text</small></h5>
  <h6>h6 标题 heading <small>副标题 Secondary text</small></h6>
</div>

实际使用：

    <div class="mdui-typo">
        <h1 class="mdui-text-center"> <span class="mdui-text-color-blue-500 mdui-typo-display-3">MDUI</span> <small>一款美观的css框架</small></h1>
</div>

内联文本样式

<div class="mdui-typo">
  <p><a href="#">这是一个链接</a></p>
  <p>使用 mark 标签来<mark>高亮文本</mark>。</p>
  <p><del>这行文本被视为已删除文本。</del></p>
  <p><ins>这行文本是被强势插入的元素。</ins></p>
  <p><u>这行文本带有下划线。</u></p>
  <p><small>这行文本字体被缩小了。</small></p>
  <p><strong>这行文本被加粗了。</strong></p>
  <p><em>这段文本是斜体的。</em></p>
  <p>响应式设计缩写 <abbr title="Responsive web design">RWD</abbr></p>
  <p>这行文本包含内联代码 <code>&lt;code&gt;</code></p>
  <p>按下 <kbd>Esc</kbd> 可以关闭对话框</p>
  <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
</div>

水平线

<div class="mdui-typo">
  <hr/>
</div>

引用

<div class="mdui-typo">
  <blockquote>
    <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
    <footer>马尔克斯 ——《百年孤独》</footer>
  </blockquote>
</div>

代码块

CSS 类名列表