基本
UI 库的基本设置
排版
目录
标题
用于各种需要标题的场景。
此系列 HTML 标签具有「标题」的语义,所以只能在表示「标题」的地方使用,不要用在普通文本中!
h1. 标题 | |
h2. 标题 | |
h3. 标题 | |
h4. 标题 | |
h5. 标题 |
<!-- HTML -->
<h1>h1. 标题</h1>
<h2>h2. 标题</h2>
<h3>h3. 标题</h3>
<h4>h4. 标题</h4>
<h5>h5. 标题</h5>
每个级别的标题有各自的大小、颜色、高度等:
级别 | 字体大小 | 行高 | 颜色 | 边距 |
---|---|---|---|---|
h1 | 18px | 1.5 倍 | #4C4C4C | 上:21px 下: 10.5px |
h2 | ||||
h3 | 16px | |||
h4 | 14px | #666666 | 上:10.5px 下: 10.5px | |
h5 | 12px | #999999 |
因为有些场景是非标题类的文本需要与标题类标签有相同的大小和颜色,所以提供了几个对应的 Sass mixin。
// Sass
.h1 {
@include h1;
}
.h2 {
@include h2;
}
.h3 {
@include h3;
}
.h4 {
@include h4;
}
.h5 {
@include h5;
}
标点符号
一般情况下是用不到标点符号的处理的,但是在解析文字处理软件导出的文档(例如 Office Word 文档)时有可能会需要。
因为浏览器对 CSS 的兼容问题,为了保证在任何浏览器中都能够正常显示,需要调用脚本代码 YouYu.punctuate()
来确保。更多信息请看 YouYu.punctuate()。
着重号
有渔是最好的在线教育网站
<!-- HTML -->
<span class="punc-emphasis">有渔是最好的在线教育网站</span>
// JavaScript
// 兼容各浏览器
YouYu.punctuate($(".punc-emphasis"));
波浪线
有渔大法好!
<!-- HTML -->
<span class="punc-guillemet">有渔大法好!</span>
// JavaScript
// 兼容各浏览器
YouYu.punctuate($(".punc-guillemet"));