『前端样式分享』联系我们卡片式布局 自适应屏幕 hover动效 在wikijs中使用 （代码拿来即用）

目录

• • 预览效果
  • 分析要点
  • • 响应式网格布局
    • 卡片样式：阴影和过渡效果
    • 代码
    • 优化希望 长短不一的邮箱地址在左右居中的同时,做到左侧文字对齐(wikijs可用)
    • 总结

      ---

      分析要点

      响应式网格布局

      .cardList {
          margin: 40px auto;
          padding: 0 15px;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 20px;
      }
      

      使用了 grid 布局，通过 grid-template-columns 定义了响应式列布局。

      auto-fill 和 minmax(300px, 1fr) 实现了在不同屏幕尺寸下的自适应布局。卡片的最小宽度为 300px，而最大宽度根据可用空间动态调整。

      gap: 20px 使得每个卡片之间有一定的间距，提升视觉效果。

      卡片样式：阴影和过渡效果

      .card {
          background-color: #fff;
          border-radius: 8px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
          padding: 20px;
          text-align: center;
          transition: transform .3s, box-shadow .3s;
      }
      

      .card:hover {
          transform: translateY(-10px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
      }
      

      .card 类的样式设计简洁，采用了白色背景和圆角（border-radius: 8px）来提升现代感。

      box-shadow 添加了阴影效果，使得卡片看起来有浮动感。

      transition 属性定义了卡片的过渡效果，使得卡片在鼠标悬停时出现平滑的动画效果（例如，向上移动和阴影加深）。