文本是《WordPress美化（共11篇）》专题的第 2 篇。阅读本文前，建议先阅读前面的文章：
赖胖站长为你的网站增加漂亮的广告条
主题后台-首页模块-自定义html-模块代码
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>
<span class="badge bg-danger">
Hello,大佬！<sup aria-hidden="true" class="spinner-grow spinner-grow-sm ml-1 small" role="status" style=" width: .5rem; height: .5rem; "></sup>
</span>
</strong>
<span>【赖胖站长】---laipang.com全站美化资源免费看任意下，别错过哦！</span>
<a class="badge bg-warning text-dark" href="/vips"
rel="nofollow noopener noreferrer" target="_blank">
加入我们
</a>
</div>
然后主题的css样式添加
.alert-warning {
color: #664d03;
background-color: #fff3cd;
border-color: #ffecb5;
}
.alert-dismissible {
padding-right: 3rem;
}
.alert {
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
@media (prefers-reduced-motion: reduce){
.fade {
transition: none;
}
}
.fade {
transition: opacity .15s linear;
}
.bg-danger {
background-color: #dc3545!important;
}.badge {
display: inline-block;
padding: .35em .65em;
font-size: .75em;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
}
.bg-warning {
background-color: #ffc107!important;
}
.text-dark {
color: #212529!important;
}.alert-dismissible .btn-close {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 1.25rem 1rem;
}
.btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: .25em .25em;
color: #000;
border: 0;
border-radius: .25rem;
opacity: .5;
}
@media (prefers-reduced-motion: reduce){
.spinner-border, .spinner-grow {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
}
.spinner-grow-sm {
width: 1rem;
height: 1rem;
}.spinner-grow {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: -.125em;
background-color: currentColor;
border-radius: 50%;
opacity: 0;
-webkit-animation: .75s linear infinite spinner-grow;
animation: .75s linear infinite spinner-grow;
}.small, small {
font-size: .875em;
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}
.btn-close:hover {
color: #000;
text-decoration: none;
opacity: .75;
}
sup.spinner-grow.spinner-grow-sm.ml-1.small {
margin-left: 4px;
margin-bottom: 4px;
}
