子比主题美化 – 二次元渐变效果五格模块-狐狸库

效果演示

鼠标悬停会显示图片。

使用步骤

以下代码放入 WordPress后台 >> 外观 >> 自定义 HTML

/*
* 二次元渐变效果五格模块 huliku.com *
*/
<div class="home-row-left content-area ">
<div id="html-box-qkyl_sdk" class="html-box">
<div data-v-d1c115ee="" class="course-project-panel-course">
<ul data-v-d1c115ee="">
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://huliku.com/" target="_blank">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title nike">狐狸库</p>
<p data-v-d1c115ee="" class="describe">欢迎大家来访</p>
<p data-v-d1c115ee="" class="describe">有幸遇见，恰巧合拍</p>
<div data-v-d1c115ee="" class="line nike-line"> </div>
<button data-v-d1c115ee="" type="button" class="nike-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom nike-bottom">
<p data-v-d1c115ee="" class="title">狐狸库</p>
<p data-v-d1c115ee="" class="describe">欢迎大家来访</p>
<p data-v-d1c115ee="" class="describe">有幸遇见</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://huliku.com/" class="">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title vip">美化教程</p>
<p data-v-d1c115ee="" class="describe">优美的你</p>
<p data-v-d1c115ee="" class="describe">愿你吉祥</p>
<div data-v-d1c115ee="" class="line vip-line"> </div>
<button data-v-d1c115ee="" type="button" class="vip-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom vip-bottom">
<p data-v-d1c115ee="" class="title">美化教程</p>
<p data-v-d1c115ee="" class="describe">优美的你</p>
<p data-v-d1c115ee="" class="describe">愿你吉祥</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>
<span data-v-d1c115ee="">查看详情</span>
</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://huliku.com/" class="">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title routine">系统科技</p>
<p data-v-d1c115ee="" class="describe">每一章都很优质</p>
<p data-v-d1c115ee="" class="describe">学习更加轻松哦</p>
<div data-v-d1c115ee="" class="line routine-line"></div>
<button data-v-d1c115ee="" type="button" class="routine-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom routine-bottom">
<p data-v-d1c115ee="" class="title">系统科技</p>
<p data-v-d1c115ee="" class="describe">每一章都很优质</p>
<p data-v-d1c115ee="" class="describe">学习更加轻松哦</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://huliku.com/" class="">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title ten">Android</p>
<p data-v-d1c115ee="" class="describe">原始的质感</p>
<p data-v-d1c115ee="" class="describe">带你步入高效的殿堂</p>
<div data-v-d1c115ee="" class="line ten-line"> </div>
<button data-v-d1c115ee="" type="button" class="ten-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom ten-bottom">
<p data-v-d1c115ee="" class="title">Android</p>
<p data-v-d1c115ee="" class="describe">原始的质感</p>
<p data-v-d1c115ee="" class="describe">带你步入高效的殿堂</p>
<div data-v-d1c115ee="" class="line"> </div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
<li data-v-d1c115ee="">
<a data-v-d1c115ee="" href="https://huliku.com/" target="_blank">
<div data-v-d1c115ee="" class="top">
<p data-v-d1c115ee="" class="title double">实用云址</p>
<p data-v-d1c115ee="" class="describe">每一个地址</p>
<p data-v-d1c115ee="" class="describe">都是我们的好帮手</p>
<div data-v-d1c115ee="" class="line double-line"> </div>
<button data-v-d1c115ee="" type="button" class="double-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
<div data-v-d1c115ee="" class="bottom double-bottom">
<p data-v-d1c115ee="" class="title">实用云址</p>
<p data-v-d1c115ee="" class="describe">每一个地址</p>
<p data-v-d1c115ee="" class="describe">都是我们的好帮手</p>
<div data-v-d1c115ee="" class="line"></div>
<button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
<span>查看详情</span>
</button>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>

以下代码放到css样式

此处内容已隐藏，请付费后查看

下载附件放到网站根目录

温馨提示： 本文最后更新于2024/01/03 21:11:16。若文章内容或图片失效，请留言或联系站长反馈！

也想出现在这里？联系我们吧

文章来源

Huliku.Com

隐私政策

PrivacyPolicy

用户协议

UseGenerator

许可协议

NC-SA 4.0

1. 资源都是经过站长或作者收集测试修改后发布分享。如若转载请在文内以超链形式注明狐狸库文章出处，谢谢合作！
2. 本站除原创内容，其余所有内容均收集自互联网，仅限用于学习和研究目的，本站不对其内容的合法性承担任何责任。如有版权内容，请通知我们或作者删除，其版权均归原作者所有，本站虽力求保存原有版权信息，但因众多资源经多次转载，已无法确定其真实来源，或已将原有信息丢失，所以敬请原作者谅解！
3. 本站用户所发布的一切资源内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责，若您对本站所载资源作品版权归属存有异议，请留言附说明联系邮箱，我们将在第一时间予以处理，同时向您表示歉意！为尊重作者版权，请购买原版作品，支持您喜欢的作者，谢谢！
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客如有发现请立即向站长举报；本站资源文件大多存储在云盘，如发现链接或图片失效，请联系作者或站长及时更新。

THE END