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如何实现页面排版布局()】输出如下:
文章图片
推荐阅读
- PHP如何使用getprotobynumber()函数(示例)
- 算法题(如何计算排列系数(代码实现))
- 亚马逊面试题详细分享|S18
- 亚马逊面试题分享|S19
- 亚马逊面试题分享|S20
- 亚马逊面试经验分享|S21
- 亚马逊面试题分享|套装22
- Windows8设备管理器显示umdf hid minidriver未知设备怎样办?
- Win8系统更改SkyDrive默认保存位置的技巧