zibll底部炫酷引导卡片小工具代码

zibll底部炫酷引导卡片小工具代码

样式一演示

图片[1]-zibll底部炫酷引导卡片小工具代码-乡野博文

在后台—》外观—》小工具—》首页-底部全宽度,自定义HTML添加下面代码即可。

<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>乡野博文</h3>
      <p>欢迎光临寒舍!</p>
    </div>
    <ul class="actions">
      <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=550966987&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="http://www.zau.cn/lianjie" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章,按<span>Ctrl</span>+<span>D</span>收藏本站!</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用,建议同步修改,亦可删除(不建议)*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码,颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>

样式二演示

图片[2]-zibll底部炫酷引导卡片小工具代码-乡野博文

在后台—》外观—》小工具—》首页-底部全宽度,自定义HTML添加下面代码即可。

<section class="buy-container">
	<div class="buy-box">
		<div class="slogan">
			<h3>乡野博文</h3>
			<p>嘿!欢迎光临寒舍。</p>
			<p id="current-time"></p>
		</div>
		<ul class="actions">
			<li>
				<a href="http://wpa.qq.com/msgrd?v=3&uin=550966987&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
			</li>
			<li>
				<a href="http://www.zau.cn/lianjie" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
			</li>
		</ul>
	</div>
	<span class="tips"><div id="go-fav">更多精彩文章,按<span>Ctrl</span>+<span>D</span>收藏本站!</div></span>
	</section>
<style type="text/css">
.buy-container{color:#ccc;padding:60px 40px 50px 40px;margin:0 auto;/*background:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);*/background: linear-gradient(180deg, #FFB7B7 0%, #727272 100%), radial-gradient(60.91% 100% at 50% 0%, #FFD1D1 0%, #260000 100%), linear-gradient(238.72deg, #FFDDDD 0%, #720066 100%), linear-gradient(127.43deg, #00FFFF 0%, #FF4444 100%), radial-gradient(100.22% 100% at 70.57% 0%, #FF0000 0%, #00FFE0 100%), linear-gradient(127.43deg, #B7D500 0%, #3300FF 100%);
background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;border-radius:var(--main-radius)}
.buy-container .buy-box{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;max-width:900px;margin:0 auto}
@media screen and (max-width:700px){.buy-container .buy-box{display:block;text-align:center}
.buy-container .buy-box .slogan{margin-bottom:30px}
}
.buy-container .buy-box .slogan h3{color:#fff;font-size:26px;margin:0 0 10px 0}
@media screen and (max-width:800px){.buy-container .buy-box .slogan h3{font-size:24px}
}
@media screen and (max-width:500px){.buy-container .buy-box .slogan h3{font-size:20px}
}
@media screen and (max-width:400px){.buy-container .buy-box .slogan h3{font-size:18px}
}
.buy-container .buy-box .slogan p{color:#fff;font-size:14px;font-weight:700;margin:10px 0}
.buy-container .buy-box .actions{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;list-style-type:none;margin:0;padding:0}
@media screen and (max-width:700px){.buy-container .buy-box .actions{-webkit-box-pack:justify;justify-content:center}
}
.buy-container .buy-box .actions li{margin:0}
.buy-container .buy-box .actions li:last-child{margin-left:10px}
.buy-container .buy-box .actions li a{position:relative;color:#fff!important;font-size:14px;font-weight:700;line-height:1;text-decoration:none;padding:10px 20px;background-color:rgba(255,255,255,.1);-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s}
.buy-container .buy-box .actions li a:hover{-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-o-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px 0 rgba(0,0,0,.2);-o-box-shadow:0 5px 10px 0 rgba(0,0,0,.2);box-shadow:0 5px 10px 0 rgba(0,0,0,.2);opacity:1!important}
@media screen and (max-width:330px){.buy-container .buy-box .actions li a{font-size:12px}
}
.buy-container .buy-box .actions li a:not(.primary):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:inset 0 0 0 1px currentColor;-moz-box-shadow:inset 0 0 0 1px currentColor;-o-box-shadow:inset 0 0 0 1px currentColor;box-shadow:inset 0 0 0 1px currentColor;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;-khtml-opacity:.3;-moz-opacity:.3;opacity:.3}
.buy-container .buy-box .actions li a:after{display:none}
.buy-container .buy-box .actions li a.primary{color:#ff3b30!important;background-color:#fff}
.buy-container .tips{border-top:1px solid rgba(255,255,255,.1);display:block;color:#fff;font-size:12px;text-align:center;max-width:900px;margin:30px auto 0 auto;padding-top:30px}
@media screen and (max-width:768px){.buy-container{padding:30px 40px 30px 40px}
}
#go-fav{width:100%;height:100%;line-height:30px;text-align:center;font-size:14px;font-weight:700;color:#fff}
#go-fav span{padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>
温馨提示:本文最后更新于2022-05-12 08:30:54,某些文章具有时效性,若有错误或已失效,请在下方留言或联系乡野博文
您阅读这篇文章共花了: 0小时00分00秒
-----本页内容已结束,喜欢请分享!-----
© 版权声明
THE END
喜欢本站内容,请点【点赞】【分享】和【收藏】~
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容