主题基本美化教程

美化有序标签

示例及效果如下：

这里是第一个标签
这里是第一个标签
这里是第一个标签
将以下代码加入到主题自定义的css

ol{
  list-style: none;  /* 隐藏原来的 1. 2. 等序号样式 */
  counter-reset: ol-li;
}
 
ol li:before {
    display: block;
    float: left;
    width: 19px;   /* 宽度和高度需要根据自己的字体大小进行修正 */
    height: 19px;
    line-height: 19px;
    margin: 4px 12px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    background-color: #49b1f5;
    border-radius: 50%;
    text-align: center;
    content: counter(ol-li);
    counter-increment: ol-li;
    transition: all .5s;
}

这时候我们发现这个有序标签还没旋转动起来，那么我们在css中接着加入以下代码

ol li:hover::before{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

但是现在我们会发现，整个网站的标签都变成了这样，那我们如何只让他在文章中出现呢？
在第一个代码块ol前面加上#post即可使用了。

美化分隔符 hr 样式

就如本站的分隔符，是一个虚线和剪刀，让我们先引入图标库放在头部自定义即可

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>

把下面代码加入到css中即可

/* 美化 hr 样式 */
hr {
    position: relative;
    margin: 2rem auto;
    width: calc(100% - 4px);
    border: 2px dashed #a4d8fa;
    background: #fff;
}
 
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
 
hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: #49b1f5;
    content: '\f0c4';
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
 
hr:hover::before{
    left: 95%;
}

效果如下：

常用的 note 标签

这里是 info 标签样式

这里是不带符号的 info 标签样式

这里是 primary 标签样式

这里是不带符号的 primary 标签样式

这里是 warning 标签样式

这里是不带符号的 warning 标签样式

这里是 danger 标签样式

这里是不带符号的 danger 标签样式

我们照样先引入图标库

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>

把下面代码加入到css中即可

/* note 公共样式 */
.note {
    position: relative;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: initial;
    border-left: 3px solid #eee;
    background-color: #f9f9f9;
    border-radius: 3px;
    font-size: var(--content-font-size);
}
 
.note:not(.no-icon):before {
    position: absolute;
    font-family: FontAwesome;
    font-size: larger;
    top: 11px;
    left: 15px;
}
 
.note:not(.no-icon) {
    padding-left: 45px;
}
 
.note.info {
    background-color: #eef7fa;
    border-left-color: #428bca;
}
 
.note.info:not(.no-icon):before {
    content: "\f05a";
    color: #428bca;
}
 
.note.warning {
    background-color: #fdf8ea;
    border-left-color: #f0ad4e;
}
 
.note.warning:not(.no-icon):before {
    content: "\f06a";
    color: #f0ad4e;
}
 
.note.primary {
    background-color: #f5f0fa;
    border-left-color: #6f42c1;
}
 
.note.primary:not(.no-icon):before {
    content: "\f055";
    color: #6f42c1;
}
 
.note.danger {
    background-color: #fcf1f2;
    border-left-color: #d9534f;
}
 
.note.danger:not(.no-icon):before {
    content: "\f056";
    color: #d9534f;
}

在写 md 时使用方式如下，以 html 标签方式引入：

<div class="note info">这里是 info 标签样式</div>
 
<div class="note info no-icon">这里是不带符号的 info 标签样式</div>
 
<div class="note primary">这里是 primary 标签样式</div>
 
<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>
 
<div class="note warning">这里是 warning 标签样式</div>
 
<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>
 
<div class="note danger">这里是 danger 标签样式</div>
 
<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>

渐变 note 标签样式

默认情况

success

error

warning

我们照样先引入图标库

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">

把下面代码加入到css中即可

.tip {
    position: relative;
    color: #fff;
    background: #20a0ff;
    background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
    background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
    background: linear-gradient(90deg,#20a0ff,#20b8ff);
    padding: 6px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    margin-bottom: 20px
}
 
.tip p {
    margin: 5px 0!important
}
 
.tip:before {
    background: #20a0ff;
    background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
    background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
    background: linear-gradient(0deg,#0092ff,#20b8ff);
    border-radius: 50%;
    color: #fff;
    content: "\f129";
    font-size: 12px;
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 24.5px;
    left: -12px;
    top: -12px;
    -webkit-box-shadow: 0 0 0 2.5px #fff;
    box-shadow: 0 0 0 2.5px #fff;
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    text-align: center
}
 
.btn,.getit a {
    position: relative
}
 
.well .tip:before {
    -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
    box-shadow: 0 0 0 2.5px #f7f8f9
}
 
.tip ol {
    margin: 0
}
 
.tip.success {
    background: #61be33;
    background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
    background: -webkit-linear-gradient(left,#61be33,#8fce44);
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    -webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
    box-shadow: 0 3px 5px rgba(104,195,59,.5)
}
 
.tip.success:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
    background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
    background: linear-gradient(0deg,#52bb1d,#95d34b);
    content: "\f00c";
    text-shadow: 0 -1px #61be33
}
 
.tip.warning {
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
    box-shadow: 0 3px 5px rgba(255,154,73,.5)
}
 
.tip.warning:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
    background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
    background: linear-gradient(0deg,#ff8f35,#ffc149);
    content: "\f12a";
    text-shadow: 0 -1px #ff953f
}
 
.tip.error {
    background: #ff4949;
    background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
    background: -webkit-linear-gradient(left,#ff4949,#ff7849);
    background: linear-gradient(90deg,#ff4949,#ff7849);
    text-shadow: 0 -1px #ff4949;
    -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
    box-shadow: 0 3px 5px rgba(255,73,73,.5)
}
 
.tip.error:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
    background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
    background: linear-gradient(0deg,#ff3838,#ff7849);
    content: "\f00d";
    text-shadow: 0 -1px #ff4949
}
 
/*夜间适配*/
.night .tip {
    filter: brightness(0.7);
}
 
/* snote夜间模式 */
.night .tip{
  color: #4c4948;
}

同上面所标签样式一下，均使用 HTML 标签的方式在 md 中写入：

<div class='tip'><p>默认情况<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>