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

网站建设后需要录入网站开发一个支付功能要好多钱

wzjs 2025/8/29 18:21:46

网站建设后需要录入,网站开发一个支付功能要好多钱,网站代理网站,宁国市城乡与住房建设网站目录预览效果分析要点响应式网格布局卡片样式：阴影和过渡效果代码优化希望长短不一的邮箱地址在左右居中的同时,做到左侧文字对齐(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 属性定义了卡片的过渡效果，使得卡片在鼠标悬停时出现平滑的动画效果（例如，向上移动和阴影加深）。

代码

<!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>