文本是《WordPress美化(共17篇)》专题的第 15 篇。阅读本文前,建议先阅读前面的文章:
- 1.WordPress博客为文章内容页添加展开收缩功能
- 2.7b2教程-添加横幅广告条
- 3.WordPress日主题专业版UI美化RIPro9.0子主题
- 4.Zibll子比主题缩略图美化插件
- 5.7b2最新自定义角标_随心所欲改色
- 6.RiProV2美化-用代码实现彩色标签云
- 7.RIPro-V5主题添加标签云彩色代码
- 8.RIPro-V5主题单独添加首页logo而其它页面保持不变
- 9.RiPro-V5主题首页四格美化小工具教程
- 10.VAN主题V1.5版本|RIPRO_V5子主题
- 11.B2主题美化:纯代码实现文章列表封面显示文章内图片数量
- 12.B2Pro主题美化 文章头部信息/资源类文章美化
- 13.子比功能增强-发布文章自定义文章动态前缀申明(更新,适配移动端)
- 14.7b2首页文章标题美化
下图红框位置就是b2主题模块标题导航美化版,该样式参考94设计素材网,网友扒下后分享的,hover动效一同写了下来,标题导航模块设计的比较漂亮,也算是B2主题里面美化很漂亮的一个站点了,特别是在模块及文章内页资源下载的美化。

b2主题或者子主题style.css添加一下代码:
/*仿94设计标题模块导航*/
/*外边框*/
.box {
border: 0;
background: none;
box-shadow: 0 0 0 rgba(0,0,0,.075);
}
/*标题*/
.post-modules-top {
padding: 0 15px 20px 15px;
border-bottom: 0px solid #f3f3f3;
white-space: nowrap;
flex-direction: row;
}
.post-modules-top .modules-title-box {
padding: 8px 0;
display: block;
}
.post-list .module-title {
position: relative;
text-align: left;
font-weight: 600 !important;
font-size: 28px;
}
.post-list-cats {
padding: 10px 16px 10px 30px;
border-left: none;
border-radius: 6px;
background: none;
width: calc(100% + 2px);
margin-left: -2px;
overflow: hidden;
}
/*模块按钮*/
.picked.post-load-button span {
border-radius: 4px;
background: #504BCC;
color: #fff;
padding: 10px 14px;
}
.post-list-cats a span:hover {
background: #504BCC;
color: #fff !important;
border-radius: 2px;
}
/*按钮背景颜色*/
.post-list-cats a::before {
background: #f6f7f8;
}
/*去除分割线条*/
.b2_gap > li {
border-bottom: none;
border-right: none;
}
/*hover动效*/
.item-in {
position: relative;
/*margin: 0;*/
border: 1px solid #f0f0f0;
box-shadow: 0 0 10px rgba(0,0,0,.05);
transition: all .2s;
}
.item-in:hover {
-webkit-box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
box-shadow: 0 3px 6px -4px rgba(62, 94, 255, 0.050980392156862744), 0 6px 16px 0 rgba(62, 94, 255, 0.050980392156862744), 0 9px 28px 8px rgba(62, 94, 255, 0.050980392156862744);
transform: translateY(-3px);
}
/*动效下标题调整*/
.post-info {
padding: 1pc 8px;
background: #fff;
}
您已阅读完《WordPress美化(共17篇)》专题的第 15 篇。请继续阅读该专题下面的文章: