当前位置:首页>WordPress专区>WordPress美化>7B2主题美化>B2主题美化:仿94设计素材网模块标题导航

B2主题美化:仿94设计素材网模块标题导航

下图红框位置就是b2主题模块标题导航美化版,该样式参考94设计素材网,网友扒下后分享的,hover动效一同写了下来,标题导航模块设计的比较漂亮,也算是B2主题里面美化很漂亮的一个站点了,特别是在模块及文章内页资源下载的美化。

B2主题美化:仿94设计素材网模块标题导航

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;
}
免责声明 1:本站的课程与素材,都是电子版课件,非实物光盘,课件由百度网盘发送.(百度网盘下载教程)2:本站所有涉及视频及素材,软件等由互联网搜索收集而来,本站不拥有此类资料的版权。3:本站所有视频,素材及软件不加密、不限时、可永久观看或使用!禁止二次销售,否则因此引起的一切问题与本站无关。4:本站所有的资源均为免费提供,提供资料的目的是让大家学习和交流,所收取的相关费用非资料销售费用,而是资料收集整理手工费。5:无意侵害您的权益,请发送邮件至 590173@qq.com 或点击左侧 私信:站长反馈,我们将尽快处理。

给TA打赏
共{{data.count}}人
人已打赏
7B2主题美化

7b2首页文章标题美化

2024-6-2 6:53:24

WordPress插件

TranslatePress v2.7.9 中文版 – WordPress 多语言插件

2024-6-19 6:09:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索