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

2021年3月23日14:47:07 发表评论 664 次浏览

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如何实现页面排版布局?1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: