下图红框位置就是B2主题模块标题导航美化版,该样式参考94设计素材网,网友扒下后分享的,hover动效一同写了下来,标题导航模块设计的比较漂亮,也算是B2主题里面美化很漂亮的一个站点了,特别是在模块及文章内页资源下载的美化。
添加一下代码:
/*仿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 本站永久网址:http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络,不保证其完整性以及安全性,不提供技术支持,请下载后自行研究。
6 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
2 本站永久网址:http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络,不保证其完整性以及安全性,不提供技术支持,请下载后自行研究。
6 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
还没有评论,来说两句吧...