7b2教程-添加横幅广告条

7b2教程-添加横幅广告条

模块代码

<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>【酷乐资源屋】---全站美化资源免费看任意下，别错过哦！</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;

}

提示： 本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：522552094@qq.com