文章最后更新时间:
直接将下面的代码放到:子比主题–>>自定义CSS样式即可!
@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}
*{font-family: "lovely"}
![图片[1] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251209064515642.gif)
将下面的代码放到:/wp-content/themes/zibll/footer.php的</footer>标签后面即可
<!--底部波浪开始-->
<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 88 18
v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
</g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->
效果
诺守博客致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!
将下面的代码放到你想显示的地方即可!
<p class="tengfei-print">诺守博客致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!</p>
将下面的代码放到:自定义CSS样式即可!
<style>
.tengfei-print{
width:1000px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: dy 5s steps(60, end) infinite;
animation: dy 5s steps(50, end) infinite;
}
@-webkit-keyframes dy{
from{
width:0;
}
}
@keyframes dy{
from{
width:0;
}
}
</style>
![图片[2] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251209063001428.gif)
将下面的代码放到:子比主题–>>自定义CSS样式即可!
::selection {
background: transparent;
color:#57BD6A;
}
![图片[3] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251209063111144.jpg)
将下面的代码放到:子比主题–>>自定义CSS样式即可!
.navbar-top .sub-menu,
.theme-popover {
background: linear-gradient(135deg, #ffffffb0 35%, #ffffffb0 100%);
backdrop-filter: saturate(5) blur(20px)
}
![图片[4] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251209063316116.jpg)
放到:子比主题–>>自定义CSS样式即可!
.wp-posts-content img {border-radius: 15px;}
效果如下
我是诺守博客
这个样式就是鼠标移动显示隐藏的文字,非常的实用,将下面的css放到:子比主题–>>自定义CSS样式即可,然后我们通过标签来实现隐藏文字,如下代码,记住代码里面的css代码是.wponss,那么我们的元素需要是class
.wponss {
text-decoration: none;
transition: filter 150ms ease-in-out;
transition-delay: 500ms;
filter: blur(4px);
}
.wponss:hover {filter: blur(0);
transition-delay: 0ms;
}
<p class="wponss">我是诺守博客</p>
![图片[5] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251209063635489.webp)
将下面代码放置自定义CSS即可!
/*首页文章列表悬停上浮开始*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*首页文章列表悬停上浮结束*/
教程如下
1、进入子比主题目录—>pages这个目录下创建PHP文件,然后把下面的代码添加进去。
2、把上面的代码添加进行保存后,进入到后台—>页面—>新建页面—->选择热门标签页面即可使用。
3、如果懒得创建添加PHP文件的话,可以下载下面我创建好的PHP文件,上传到子比主题的pages这个目录下,然后按照第2点进行创建页面就好了
![图片[6] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251209063817290.webp)
CSS代码
/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://picshack.net/ib/7Lm5teUTyV.jpg);}
.mobile-nav-widget .box-body {
background: var(--muted-border-color) !important;}
}
这是一个简单的CSS代码,若要更换图片请将CSS图片里面的链接换成你自己的即可!!




![诺守博客 - 专业的网络资源分享平台![官网]](https://image.nuoso.cn/2025/12/20251205102715204.png)


- 最新
- 最热
只看作者