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

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

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

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

效果预览:

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

如何使用?

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

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

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

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

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管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索