avatar

我收藏的tags/note样式(个人使用)

个人博客常用tags/note模板

本篇文章涉及内容来自 小康博客 Butterfly主题安装文档(作者:jerry)

以下主要是我对以上两位大佬所写内容的摘要,主要服务于我今后的博文创作

若您希望可以使用这些效果,请详细阅读以上两位大佬的博客,因为涉及到主题(或版本)不同,若没有增加或引入正确的CSS/JS文件,直接写入下列代码将不能获得对应效果

1
2
3
4
5
<div class= "checkbox red checked" > <input type= "radio" checked="checked">实心红色圆圈</div>
<div class="checkbox minus blue checked"><input type="checkbox" checked="checked">方块蓝色减号</div>
<div class="checkbox green checked"><input type="checkbox" checked="checked">方块绿色对号</div>
<div class="checkbox green checked"><input type="checkbox" >方块空心对号(绿色方框)</div>
<div class="checkbox times red checked"><input type="checkbox" checked="checked">方块红色错误</div>

效果如下

实心红色圆圈
方块蓝色减号
方块绿色对号
方块空心对号(绿色方框)
方块红色错误
1
2
3
4
5
6
/* 小tag标签语法示例 */
<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>

效果如下

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

1
2
3
4
<div class="tip error"><p>错误标签</p><p></p></div>
<div class="tip warning"><p>警告标签</p><p></p></div>
<div class="tip success"><p>成功标签</p><p></p></div>
<div class="tip info"><p>信息标签</p><p></p></div>

效果如下

错误标签

警告标签

成功标签

信息标签

1
2
3
4
5
6
/* note语法示例(边框加粗版)*/
<p class='div-border green left right'>绿色</p>
<p class='div-border red left right'>红色</p>
<p class='div-border yellow left right'>黄色</p>
<p class='div-border grey left right'>灰色</p>
<p class='div-border blue left right'>蓝色</p>

效果如下

绿色

红色

黄色

灰色

蓝色

去掉left right可得基本边框版,效果如下:

绿色

红色

黄色

灰色

蓝色

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
{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

{% note primary no-icon %}
primary 提示块标签
{% endnote %}

效果如下

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

primary 无icon提示块标签

特别声明:

本篇文章涉及内容来自 小康博客 Butterfly主题安装文档(作者:jerry)

文章作者: Coder.Xie
文章链接: http://blog.ply.cool/2020/06/12/博客美化小标签/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 百般美好
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论