Materialize CSS如何实现页面排版布局（）

Materialize CSS提供了一些可用于页面排版的元素：

标头
块引用
流文本

标头：Materialize CSS提供了用于标题标签的基本样式。以下标签显示了Materialize CSS样式化的可用标头标签：

< h1> Heading 1< /h1> < h2> Heading 2< /h2> < h3> Heading 3< /h3> < h4> Heading 4< /h4> < h5> Heading 5< /h5> < h6> Heading 6< /h6>

块引用：Blockquote用于强调引号或引文。它还可以用于额外的文本层次结构和强调。

< blockquote> This is an example quotation using blockquote tag.< /blockquote>

流文本：flow-text类可用于流畅地调整必须缩放的文本的字体大小和行高。要使用流文本, 需要添加类流文本到所需的标签。下面的示例显示此类的用法。

< p class="flow-text"> I am Flow Text< /p>

注意：Materialize CSS使用的标准字体是机器人2.0字体。只需更改字体堆栈即可替换该字体。可以通过修改以下代码以包括所需的字体并将其添加到自定义CSS来完成。

html {font-family: GillSans, Calibri, Trebuchet, sans-serif; }

例子：
的HTML

< !DOCTYPE html> < html > < head > < !-- Include the Google Icon Font --> < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" > < !-- Include compiled and minified Materialize CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < !-- Include jQuery --> < script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js" > < / script > < / head > < body > < h3 > Headings< / h3 > < div class = "card-panel green" > < !-- Using all the headers --> < h1 > Heading 1< / h1 > < h2 > Heading 2< / h2 > < h3 > Heading 3< / h3 > < h4 > Heading 4< / h4 > < h5 > Heading 5< / h5 > < h6 > Heading 6< / h6 > < / div > < !-- Using blockquotes --> < h3 > Blockquote< / h3 > < h5 > < blockquote > < p > This is an example quotation that uses the blockquote tag. < br > This is a basic tutorial for the Materialize CSS Typography. < / p > < / blockquote > < / h5 > < div class = "card-panel" > < h3 > Free Flow< / h3 > < !-- Using the flow-text class --> < p class = "flow-text" > lsbin is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and courses. lsbin is a very fast growing community among programmers and have a reach of around 10 million+ readers globally. < / p > < / div > < !-- Include the compiled and minified Materialize JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

【Materialize CSS如何实现页面排版布局（）】输出如下：