94设计素材网模块标题 – B2主题WordPress美化

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

%title插图%num

如何使用?

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

  1. /*仿94设计模块标题开始*/
  2. /*标题*/
  3. .post-modules-top {
  4. padding: 0 15px 20px 15px;
  5. border-bottom: 0px solid #f3f3f3;
  6. white-space: nowrap;
  7. flex-direction: row;
  8. }
  9. .post-modules-top .modules-title-box {
  10. padding: 8px 0;
  11. display: block;
  12. }
  13. .post-list .module-title {
  14. position: relative;
  15. text-align: left;
  16. font-weight: 600 !important;
  17. font-size: 28px;
  18. }
  19. .post-list-cats {
  20. padding: 10px 16px 10px 30px;
  21. border-left: none;
  22. border-radius: 6px;
  23. background: none;
  24. width: calc(100% + 2px);
  25. margin-left: -2px;
  26. overflow: hidden;
  27. }
  28. /*模块按钮*/
  29. .picked.post-load-button span {
  30. border-radius: 4px;
  31. background: #504BCC;
  32. color: #fff;
  33. padding: 10px 14px;
  34. }
  35. .post-list-cats a span:hover {
  36. background: #504BCC;
  37. color: #fff !important;
  38. border-radius: 2px;
  39. }
  40. /*按钮背景颜色*/
  41. .post-list-cats a::before {
  42. background: #f6f7f8;
  43. }
  44. /*去除分割线条*/
  45. .b2_gap > li {
  46. border-bottom: none;
  47. border-right: none;
  48. }
  49. /*加载更多按钮*/
  50. .post-list .load-more button {
  51. padding: 11px 40px;
  52. width: auto;
  53. border: 1px solid #eee;
  54. background: linear-gradient(90deg,#504BCC,#7161ff);
  55. color: #fff;
  56. font-size: 14px;
  57. margin-top: 60px;
  58. border-radius: 5px;
  59. }
  60. .post-list .load-more button:hover {
  61. background: #504BCC;
  62. color: #fff;
  63. }
  64. /*hover动效*/
  65. .item-in {
  66. position: relative;
  67. /*margin: 0;*/
  68. border: 1px solid #f0f0f0;
  69. box-shadow: 0 0 10px rgba(0,0,0,.05);
  70. transition: all .2s;
  71. }
  72. .item-in:hover {
  73. -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);
  74. 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);
  75. transform: translateY(-3px);
  76. }
  77. /*动效下标题调整*/
  78. .post-info {
  79. padding: 1pc 8px;
  80. background: #fff;
  81. }
  82. /*仿94设计模块标题结束*/
94设计素材网模块标题 - B2主题WordPress美化

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

签到按钮美化 - B2主题美化

2020-12-6 23:13:44

WordPress

隐藏多余内容 - wordpress B2主题美化

2020-12-7 16:47:04

资源下载说明

请使用百度网盘下载资源,不要在线解压!

1、本网站名称:美萌资源网
2、本站网址:www.mmupup.com
3、关于下载后怎么观看的问题,请查看网站首页的:关于充值、会员、资源、解压等部分说明【必看】
4、本站大部分资源解压密码均为: clubmeitu.com或者7mct.cn
5、本站资源大多存储在网盘,如发现链接失效查看文章联系作者进行补档或留言


本站说明

本站主要为大家提供时尚的Cospaly小姐姐美图,天天更新Cos套图,更多福利,小姐姐,写真,宅男精品,和cosplay等精彩内容,尽情关注美萌资源网永久发布页:http://www.cosclub.top/,我们只是大自然的搬运工,我们不生成小姐姐,我们只搬运小姐姐。如有侵权请联系删除,谢谢!!Email:1638590630@qq.com

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