子比美化 第19页
2025-05-24
05-24
子比主题 - 底部添加蓝色波浪美化-汇聚访

实用子比主题 – 底部添加蓝色波浪美化

这个美化也是很久之前的美化了，发出来记录一下吧，希望对大家有用！ 演示效果： 代码部署： [hidecontent type="reply"] 进入宝塔面板，进入子比主题文件夹（zibll）找到footer.php文件夹，在footer标签(</footer>)下面添加下面代码。 <!--底部波浪开始 汇聚访www.huijuf.com--> <div class="wiiuii_layout"> <svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - 幻灯片底部虚化-汇聚访

实用子比主题 – 幻灯片底部虚化

今天给大家分享一款样式，这款样式是可以让幻灯片底部虚化的，结合起来非常好看！ 演示效果： 代码部署： [hidecontent type="payshow"] 将代码放到后台自定义CSS！ .absolute::before { content: ''; display: block; position: absolute; left: 0; top: 58%; right: 0; bottom: 0; transform: scale(1.01); background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--body-bg-color) 100%); }...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - 顶部多功能组件导航美化-汇聚访

实用子比主题 – 顶部多功能组件导航美化

这是子比主题的一款快速导航链接美化效果，这个效果最初是在极主题上看到的，于是就照着样式仿了一下，这个效果还是比较适合一些ACG站点的，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>页面&显示–>>顶部多功能组件–>>组件【下方】添加额外内容，将下面的代码丢里面即可，如果还不知道在哪，如下图！！ <div class="soft-cat-logo"> <a href="/yxsx"><span> <picture class="picture"> <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023355196.png"><img class="jitheme-radius" src="https://img.dmguo.cn/2025/02/20250212023355196.png"> </picture> </span><em>游戏资源</em> </a><a href="/7b2"><span> <picture class="picture"> <source type="image/webp" srcset="https://img.dmguo.cn/2025/02/20250212023345786.png"><img class="jitheme-radius" src="https://img.dmguo.cn/2025/02/20250212023345786.png"> </picture> </span><em>主题美化</em> </a><a href="/forums"><span> <picture class="picture"> <source...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - 分类栏目美化（两款）-汇聚访

实用子比主题 – 分类栏目美化（两款）

网站分类栏目美化的意义主要体现在提升用户体验和视觉吸引力，以及优化搜索引擎排名等方面。本文章将给大家分享两种分类栏目美化的教程哦~ 演示效果①： 演示效果②： 代码部署： [hidecontent type="reply"] 将下方代码加入到后台CSS里即可！图片放在帖子附件里了，可自行下载！ 效果①效果② .index-tab ul>li.active { color: #ffffff00 !important; background-color: #ffffff00 !important; border-radius: 6px; z-index: 1; position: relative; height: 39px; line-height: 44px; background: url(https://img.dmguo.cn/2025/01/20250120091106173.png); background-repeat: no-repeat; -webkit-background-size: 91px 39px; -moz-background-size:...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - ajax加载更多按钮美化-汇聚访

实用子比主题 – ajax加载更多按钮美化

给子比主题加一个ajax加载更多按钮的美化，这个美化确实很不错，（提供两种样式) 演示效果①： 演示效果②： 代码部署： [hidecontent type="reply"] 将下面代码放到子比自定义CSS即可 样式一： /*加载更多*/ .chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a { display: inline-block; width: 130px; -webkit-border-radius: 0 0 16px 16px; -moz-border-radius: 0 0 16px 16px; border-radius: 0 0...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - 仿哔哩哔哩网站页面回顶部的火箭-汇聚访

实用子比主题 – 仿哔哩哔哩网站页面回顶部的火箭

网站添加一个仿哔哩哔哩网站页面回顶部的火箭，小白式部署方式，喜欢的可以设置一波。 演示效果： 代码部署： [hidecontent type="payshow"] 如果是子比主题的话直接填在主题设置里的头部自定义html里即可，其他主题请自行测试！！ HTMLCSSJS <div class="to-top"></div> /*小火箭*/ .to-top { position: fixed; display: none; bottom: 100px; right: 20px; width: 62px; height: 85px; cursor: pointer; background-image: url(https://pic1.imgdb.cn/item/6900b5833203f7be00ac78dc .webp); background-position: -40px -44px; transition: transform 0.3s ease-in;...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - MacOS系统弹窗跳转引导提醒-汇聚访

实用子比主题 – MacOS系统弹窗跳转引导提醒

尘封已久的代码，今天趁有空就跟大家分享一下！做有关Mac资源的站应该比较有用，该代码可以判断主机系统来显示对应的引导链接，样式简约美观，倒计时自动关闭！ 演示效果： 代码部署： [hidecontent type="reply"] JS代码放入后台！ /*JS弹窗跳转引导提醒*/ try { if($ || jQuery) { tipsFun(); } } catch(e) { let script=document.createElement("script"); script.type="text/javascript"; script.src="路径（文件在文章最后）/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(script); script.onload = tipsFun; } function tipsFun() { // 判断用户是否是windows if((navigator.platform == "Win32")...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - 文章角标及封面图底部美化代码-汇聚访

实用子比主题 – 文章角标及封面图底部美化代码

今天分享的教程是WordPress子比主题美化教程：文章角标及封面图底部美化。简单的来说，就是在文章发布页面增加一个附加选项，可以通过这个附加选项达到我们想要的美化效果！文章发布时可在编辑页底部自行配置输入内容以及颜色，不填写内容则不显示。 演示效果： 代码部署： [hidecontent type="payshow"] 1.Zibll主题设置>>全局&功能>>自定义代码>>自定义CSS样式！ /*角标css*/ .posts-item.card .item-thumbnail { background:#c4cffa26; width:100%; padding-bottom:var(--posts-card-scale); } a.item-category { position:absolute; left:10px; top:10px; padding:5px 6px; font-size:1rem; line-height:1; color:#fff; background:var(--theme-color); border-radius:6px; } a.item-category-app { position:absolute; height:24px; line-height:24px; width:100%; text-align:center; bottom:0;...
6个月前
建站笔记
2025-05-24
05-24
子比主题 - 自带滑块验证图片修改-汇聚访

实用子比主题 – 自带滑块验证图片修改

对于子比的滑动模块我们很多人都不是很喜欢自带的滑动模块的图片，接下来我来教大家怎么自...
6个月前
建站笔记
2025-05-22
05-22
子比主题 - 侧边动漫图片社区样式-汇聚访

实用子比主题 – 侧边动漫图片社区样式

这是一款仿B站的侧边动漫图片社区小工具，这款小工具是纯代码并没有写成可视化小工具，没有适配昼夜模式，放上自己的二维码即可，旁边的几个标签都可以更改，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：外观 - 小工具 - 文章页&侧边栏（自定义HTML代码区块）添加以下代码即可，图片可自行本地化，以防丢失！ HTMLCSS <div class="mhy-qrcode-top-card"> <div class="mhy-qrcode-top-card__role-image" style="background-image: url(https://oss.longs.cn/images/2025/05/20250519022256633.png);"> </div> <div class="mhy-qrcode-top-card__role-content"> <div class="mhy-qrcode-top-card__role-content-background" style="background-image: url(https://oss.longs.cn/images/2025/05/20250519022519860.png);"> <div class="background__welcome"> <div class="background__welcome-image" style="background-image: url(https://webstatic.mihoyo.com/upload/static-resource/2023/03/06/14e05cd4d8b0babd6c7985fc 1f5801e5_689092345277877987.png);"> </div> <div class="background__welcome-text_img" style="background-image: url(https://oss.longs.cn/images/2025/05/20250519025425992.webp);">...
6个月前
建站笔记
1…1718192021…27跳转