自定义CSS小部件测试
huuhghhgyg
7月 20, 2020
新增了几个小部件，提升阅读体验与美观性
需要先引用部件库<link rel="stylesheet" href="/Tools/addition.css">
Highlight
默认标签
<span class="label label-default">default</span>
主要的标签
<span class="label label-primary">primary</span>
附加信息标签
<span class="label label-info">info</span>
Highlight(状态)
success
<span class="label label-success">success</span>warning
<span class="label label-warning">warning</span>danger
<span class="label label-danger">danger</span>
便签条
<div class="note note-good">
<span class="material-icons">thumb_up_alt</span> good deeds</div>
这是建议的做法
<div class="note note-bad">
<span class="material-icons">block</span> bad deeds</div>
这是错误的做法
<div class="note note-info">
<span class="material-icons">error</span> this is information</div>
这是信息标签
警告标签
warnings
<div class="note note-warning">
<span class="material-icons">warning</span> warnings</div>
链接卡片
<!-- card容器(card少可不用，多了用美观) -->
<div class="card-span">
<!-- 链接card -->
<div class="link-card">
<a href="/">
<span class="link-card-title">Title</span>
<span class="link-description">Rally is a personal finance app that demonstrates how</span>
<span class="link-navigation">
Visit
<span class="material-icons icon-rotate">arrow_forward</span>
</span>
</a>
</div>
<!-- 链接card -->
<div class="link-card">
<a href="/">
<span class="link-card-title">Title</span>
<span class="link-description">Rally is a personal finance app that demonstrates how</span>
<span class="link-navigation">
Visit
<span class="material-icons">cloud_download</span>
</span>
</a>
</div>
</div>
<!-- 有图标的链接card -->
<div class="link-card">
<a href="/">
<div class="img-card-span">
<image class="link-card-img" src="/img/avatar.png">
</image>
<span class="img-h2">Title</span>
<span class="img-description">Rally is a personal finance app that demonstrates how</span>
</div>
<span class="link-navigation">
Visit
<span class="material-icons icon-rotate">arrow_forward</span>
</span>
</a>
</div>
本文链接：
发文时间
7月 20, 2020
请遵循协议
