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

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

016414

样式一演示

图片[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秒
-----本页内容已结束，喜欢请分享！-----
© 版权声明

感谢您的来访，获取更多精彩文章请收藏本站。



版权声明 1 本网站名称：乡野博文
2 本站永久网址：www.zau.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ:550966987进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
技术代码技术教程
# zibll主题
喜欢本站内容，请点【点赞】【分享】和【收藏】~
点赞14 分享
相关推荐
zibll子比主题添加透明复制提醒-乡野博文
zibll子比主题添加透明复制提醒
zibll子比主题添加透明复制提醒
1年前 495
删除wordpress文章修订版本和自动草稿而残留的数据-乡野博文
删除wordpress文章修订版本和自动草稿而残留的数据
删除wordpress文章修订版本和自动草稿而残留的数据
1年前 354
zibll右侧彩色滚动条样式代码-乡野博文
zibll右侧彩色滚动条样式代码
zibll右侧彩色滚动条样式代码
1年前 303
WordPress侧边栏信息统计小工具-乡野博文
WordPress侧边栏信息统计小工具
WordPress侧边栏信息统计小工具
1年前 277
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）-乡野博文
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）
1年前 243
樱花飘落特效js代码-乡野博文
樱花飘落特效js代码
樱花飘落特效js代码
1年前 237
评论 抢沙发

请登录后发表评论

    暂无评论内容

默认头像
zibll子比主题添加透明复制提醒-乡野博文
495人已阅读
zibll子比主题添加透明复制提醒
TOP1
删除wordpress文章修订版本和自动草稿而残留的数据-乡野博文
删除wordpress文章修订版本和自动草稿而残留的数据
1年前354人已阅读
TOP2
zibll右侧彩色滚动条样式代码-乡野博文
zibll右侧彩色滚动条样式代码
1年前303人已阅读
TOP3
WordPress侧边栏信息统计小工具-乡野博文
WordPress侧边栏信息统计小工具
1年前277人已阅读
TOP4
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）-乡野博文
怎么在VIDEO视频前插入15秒视频广告（带倒计时、关闭功能）
1年前243人已阅读
TOP5
樱花飘落特效js代码-乡野博文
樱花飘落特效js代码
1年前237人已阅读
TOP6
颜色代码美化图标电脑软件模板日常技巧文章插件技术文章懒加载图小程序zibll主题WordPressPHPjQueryhtmlASP

时钟

推荐

Zibll-子比主题-本站同款

    搭建网站从一个优秀的主题开始！
    一次购买包永久免费更新
    强大的模板群为你解决主题问题
    现在购买享3个域名授权
  • 授权享免费更换且不限制次数

官方统一售价

￥569
限时直降
￥599
立即购买 - zibll

旗下网站

乡野风情fuv.cn 乡野风情
个人主页t35.cn 乡野风情
个人主页t92.cn 乡野风情
个人主页k53.cn 乡野风情
主页blog.fuv.cn 乡野风情
最新评论
bd0831的头像-乡野博文

bd08311个月前0

我只能目送着幸福的末班车远去---不是我没赶上，而是压根儿都挤不上去。
曦芸的头像-乡野博文

曦芸7个月前0

我早上照镜子的时候，都会感到一股寒意，你到底是什么人？是谁？镜子能反映出所有真实的东西，但它却不能照出真正的你。你的正义之眼看得穿邪恶之心，却看不透女人的心意。
头像

小椿1年前0

测试评论!