JOYZL STYLE

格式

文本

6级标题,HTML标签 h1 h2 h3 h4 h5 h6;样式类:h1 h2 h3 h4。

一级标题 h1

二级标题 h2

三级标题 h3

四级标题 h4

五级标题 h5
六级标题 h6

8级文本,样式类 t1 t2 t3 t4 t5 t6 t7 t8

一级文本 t1
二级文本 t2 (1 rem)
三级文本 t3
四级文本 t4
五级文本 t5
六级文本 t6
七级文本 t7
八级文本 t8

对齐

样式类 tl tc tr 别名 text-left text-center text-right

text-left
text-center
text-right

溢出

样式类 te tn ts 别名 text-ellipsis text-nowrap text-scroll

text-ellipsis 文本溢出后显示省略号,溢出的部分文本不可见
text-nowrap 文本溢出后将直接截断隐藏,溢出的部分文本不可见
text-scroll 文本溢出后将自动滚动,溢出的部分文本可见

文本溢出自动滚动还不够完美,尚待解决。

标记

单个标记配合状态颜色。

主要 次要 成功 危险 警告 信息
<mark class="primary">...</mark>
<mark class="secondary">...</mark>
<mark class="success">...</mark>
<mark class="danger">...</mark>
<mark class="warning">...</mark>
<mark class="information">...</mark>
<mark class="light">...</mark>
<mark class="dark">...</mark>

组合标记配合状态颜色。

JOYZL STYLE v1.2.2
<a class="group">
	<mark class="primary">JOYZL STYLE</mark>
	<mark class="information">v1.2.2</mark>
</a>

代码块

优化<pre>标签外观,并限制高度提供滚动条。

<code>print("Hello World");</code>
<b>加粗文本</b>
<em>强调文本</em>
<strong>强壮文本</strong>
<u>下划线</u>
<s>删除线文本</s>
<del>删除文本</del>
<ins>插入文本</ins>
<i>斜体文本</i>
<mark>标记文本</mark>
<small>小文本</small>
<q>引用</q>
<cite>引用</cite>
<kbd>Cmd</kbd>
<kbd>Ctrl</kbd>+<kbd>S</kbd>
<samp>计算机样本</samp>
<code>print("Hello World");</code>
<sub>下标</sub>
<sup>上标</sup>
<time>9:00</time>

引用块

优化<blockquote>标签外观。

Life is what happens when you're busy making other plans.

— John Lennon
<blockquote>
	<p>Life is what happens when you're busy making other plans.</p>
	<cite>— John Lennon</cite>
</blockquote>

地址块

作者:张希
网站:www.joyzl.com
地址:重庆市渝中区
<address>
	作者:<a href="mailto:simon.zx@qq.com">张希</a><br>
	网站:<a href="http://www.joyzl.com" target="_blank">www.joyzl.com</a><br>
	地址:重庆市渝中区
</address>

其它

HTML5格式化标签。 以下标签仅作默认样式呈现,样式可能未进行优化调整。

文本修饰: 加粗文本强调文本强壮文本下划线删除线文本删除文本插入文本斜体文本标记文本小文本引用引用

语义修饰: 键盘文本 CmdCtrl+S计算机样本print("Hello World");下标上标, 时间文本

状态修饰: 度量60%进度

文字注音: Han (Han)zi (zi)