魔改

渐变背景标签

用法

1
2
3
4
5
6
<div class='tip'><p>默认情况<p></div>
<div class='tip info'><p>info<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>
<div class='tip font5 fas fa-atom'><p>自定义font5图标<p></div>

效果

默认情况

info

success

error

warning

自定义font5图标

小标签

效果

红色小标签绿色小标签蓝色小标签黄色小标签灰色小标签

用法

1
2
3
4
5
6
<span class="inline-tag [red|green|blue|yellow|grey]">语法</span>
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

Checkbox & Radio

参数列表:

  • 颜色:

    red,yellow,green,cyan,blue

  • 样式:

    plus,minus,times

  • 选中状态:

    checked

html格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<div class="checkbox">
  <input type="checkbox" />
  <p>纯文本测试</p>
</div>

<div class="checkbox checked">
  <input type="checkbox" checked />
  <p>
    支持简单的
    <a
      href="https://guides.github.com/features/mastering-markdown/"
      target="_blank"
      rel="noopener"
      >markdown</a
    >
    语法
  </p>
</div>

<div class="checkbox red">
  <input type="checkbox" />
  <p>支持自定义颜色</p>
</div>

<div class="checkbox green checked">
  <input type="checkbox" checked />
  <p>绿色 + 默认选中</p>
</div>

<div class="checkbox yellow checked">
  <input type="checkbox" checked />
  <p>黄色 + 默认选中</p>
</div>

<div class="checkbox cyan checked">
  <input type="checkbox" checked />
  <p>青色 + 默认选中</p>
</div>

<div class="checkbox blue checked">
  <input type="checkbox" checked />
  <p>蓝色 + 默认选中</p>
</div>

<div class="checkbox plus green checked">
  <input type="checkbox" checked />
  <p>增加</p>
</div>

<div class="checkbox minus yellow checked">
  <input type="checkbox" checked />
  <p>减少</p>
</div>

<div class="checkbox times red checked">
  <input type="checkbox" checked />
  <p>叉</p>
</div>

<div class="checkbox">
  <input type="radio" />
  <p>纯文本测试</p>
</div>

<div class="checkbox checked">
  <input type="radio" checked />
  <p>
    支持简单的
    <a
      href="https://guides.github.com/features/mastering-markdown/"
      target="_blank"
      rel="noopener"
      >markdown</a
    >
    语法
  </p>
</div>

<div class="checkbox red">
  <input type="radio" />
  <p>支持自定义颜色</p>
</div>

<div class="checkbox green">
  <input type="radio" />
  <p>绿色</p>
</div>

<div class="checkbox yellow">
  <input type="radio" />
  <p>黄色</p>
</div>

<div class="checkbox cyan">
  <input type="radio" />
  <p>青色</p>
</div>

<div class="checkbox blue">
  <input type="radio" />
  <p>蓝色</p>
</div>

效果:

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

另一种风格的note

效果展示

绿色

红色

黄色

灰色

蓝色

使用示例

1
2
3
4
5
6
7
8
9
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
<!-- 可以设置颜色和加粗方向 -->
<p class='div-border green left right top buttom'>
    左右加粗
</p>

上下左右加粗

volantis主题的note

使用效果

red

quote

info

done

success

danger

error

radiation

bug

idea-yellow

link- blue

paperclip

todo

msg cyan

guide

download

up

undo

小标题

这是个引用

使用方法

除了最后一个之外, 其他note使用html格式添加.

1
<div class='snote 类别名称'><p>content</p></div>

最后一个带有小标题的写法为:

1
<div class="snote quote"><p class="p subtitle">小标题</p><p>这是个引用</p></div>