当前位置：首页 > news >正文

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

news 来源：原创 2025/4/19 7:17:40

预览效果

在这里插入图片描述

分析要点

响应式网格布局

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

代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>联系方式</title><style>.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));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 h2 {color: #2980b9;font-size: 20px;margin-bottom: 15px}.card p {font-size: 16px;color: #555;margin-bottom: 15px}.email-list {list-style: none;padding: 0;margin: 0}.email-list li {margin: 8px 0}.email-list li a {color: #2980b9;text-decoration: none;font-weight: 700}.email-list li a:hover {text-decoration: underline}.tip {text-align: left;text-indent: 2em;}</style>
</head><body><div class="cardList"><!-- Plus4 Card --><div class="card"><h2>机器型号 1</h2><p class="tip">如果您需要有关 机器型号 1 型号的售后服务，请通过以下邮箱联系我们：</p><ul class="email-list"><li><a href="mailto:example1@domain.com">example1@domain.com</a></li><li><a href="mailto:example2@domain.com">example2@domain.com</a></li></ul></div><!-- Q1 Pro Card --><div class="card"><h2>机器型号 2</h2><p class="tip">如果您需要有关 机器型号 2 型号的支持，请通过以下联系方式联系我们：</p><ul class="email-list"><li><a href="mailto:example3@domain.com">example3@domain.com</a></li><li><a href="mailto:example4@domain.com">example4@domain.com</a></li></ul></div><!-- X-Max 3 Card --><div class="card"><h2>机器型号 3</h2><p class="tip">对于 机器型号 3 型号的售后服务，请通过以下邮箱联系我们：</p><ul class="email-list"><li><a href="mailto:example5@domain.com">example5@domain.com</a></li><li><a href="mailto:example6@domain.com">example6@domain.com</a></li></ul></div><!-- X-Plus 3 Card --><div class="card"><h2>机器型号 4</h2><p class="tip">如果您需要有关 机器型号 4 型号的售后服务，请通过以下邮箱联系我们：</p><ul class="email-list"><li><a href="mailto:example7@domain.com">example7@domain.com</a></li><li><a href="mailto:example8@domain.com">example8@domain.com</a></li></ul></div><!-- X-Smart 3 Card --><div class="card"><h2>机器型号 5</h2><p class="tip">如果您需要有关 机器型号 5 型号的售后服务，请通过以下邮箱联系我们：</p><ul class="email-list"><li><a href="mailto:example9@domain.com">example9@domain.com</a></li><li><a href="mailto:example10@domain.com">example10@domain.com</a></li></ul></div></div></body></html>

优化希望长短不一的邮箱地址在左右居中的同时,做到左侧文字对齐(wikijs可用)

wikijs本身有自带的样式,干扰了我们的ul/li/h2样式,所以用了几个!important 强制样式,如果有更好的解决办法,请评论区留言,一般情况你不需要设置这些!important 会影响性能

width: fit-content;：使

的宽度根据其内容自动适应。
margin-left: auto; 和 margin-right: auto;：将
- 居中显示在其父容器中。
  这三个属性结合使用，能确保
  - 元素不会占用多余的空间并且居中显示，同时每个
  - 元素的内容从左对齐。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>联系方式</title><style>.cardList {margin: 40px auto;padding: 0 15px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));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)}.cardTitle {color: #2980b9;font-size: 20px;margin-bottom: 15px;position: relative}.cardTitle::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #000}.card p {font-size: 16px;color: #555;margin-bottom: 15px}.email-list {list-style: none;padding: 0 !important;margin: 0;width: fit-content !important;margin-left: auto;margin-right: auto}.email-list li {margin: 8px 0;color: #2980b9;text-decoration: none;font-weight: 700;text-align: left}.email-list li::before {content: none !important}.email-list li a:hover {text-decoration: underline}.tip {text-align: left;text-indent: 2em}.important {color: #e74c3c;font-weight: 700}</style>
</head><body><div class="cardList"><!-- Plus4 Card --><div class="card"><div class="cardTitle">支持联系方式</div><p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p><ul class="email-list"><li>support111111111@example.com</li><li>support2222@example.com</li></ul></div><!-- Q1 Pro Card --><div class="card"><div class="cardTitle">支持联系方式</div><p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p><ul class="email-list"><li>support3333@example.com</li><li>support4444444444@example.com</li></ul></div><!-- X-Max 3 Card --><div class="card"><div class="cardTitle">支持联系方式</div><p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p><ul class="email-list"><li>support55555555@example.com</li><li>support666@example.com</li></ul></div><!-- X-Plus 3 Card --><div class="card"><div class="cardTitle">支持联系方式</div><p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p><ul class="email-list"><li>support7@example.com</li><li>support8@example.com</li></ul></div><!-- X-Smart 3 Card --><div class="card"><div class="cardTitle">支持联系方式</div><p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p><ul class="email-list"><li>support9@example.com</li><li>support10@example.com</li></ul></div></div></body></html>