仿94设计素材网模块标题 – B2主题wordpress美化[wordpress美化教程]

仿94设计素材网模块标题 - B2主题wordpress美化

仿94设计素材网模块标题 – B2主题wordpress美化[wordpress美化教程]

94设计素材网的模块标题简洁大气,表意明确,鲜明的颜色区分让一个个的按钮生动灵活。除了模块标题,我还顺手把hover动效写了下来,各位站长可根据自己的需要进行选择。

效果预览:

仿94设计素材网模块标题 – B2主题wordpress美化[wordpress美化教程]-度崩网-几度崩溃

如何使用?

将以下代码添加至主题根目录下的style.css文件底部即可

/*仿84设计模块标题*/
/*外边框*/
.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;
}
/*加载更多按钮*/
.post-list .load-more button {
    padding: 11px 40px;
    width: auto;
    border: 1px solid #eee;
    background: linear-gradient(90deg,#504BCC,#7161ff);
    color: #fff;
    font-size: 14px;
	margin-top: 60px;
	border-radius: 5px;
}
.post-list .load-more button:hover {
    background: #504BCC;
    color: #fff;
}
/*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;
}
仿94设计素材网模块标题 – B2主题wordpress美化[wordpress美化教程]-度崩网-几度崩溃
仿94设计素材网模块标题 – B2主题wordpress美化[wordpress美化教程]-度崩网-几度崩溃

仿94设计素材网vip界面表格_B2主题wordpress美化[wordpress美化教程]

原文地址:https://www.npc.ink/16896.html

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

仿94设计素材网vip界面表格_B2主题wordpress美化[wordpress美化教程]

2020-7-9 17:26:29

WordPress教程

怎么使用Ping List更新服务?[wordpress教程]

2020-7-9 17:30:06

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索