这套代码可以直接保存为 .html 文件,然后在浏览器中打开使用。
（图片来源网络，侵删）
核心思路
- HTML 结构: 创建一个容器，里面放置三个部分：QQ 客服链接、微信二维码、QQ 群二维码，每个部分都有一个标题、一个图标或图片以及一个说明。
- CSS 样式: 使用 Flexbox 布局，让三个部分在页面上整齐地排列，美化样式，使其看起来更专业、更美观。
- JavaScript 逻辑 (可选): 添加一个简单的功能，当用户点击某个联系方式时，可以复制其相关信息到剪贴板,方便用户使用。
完整代码
您可以直接复制下面的所有代码，保存为一个 contact.html 文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">联系我们 - QQ客服/微信/QQ群</title>
<style>
/* --- 全局样式 --- */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f0f2f5;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* --- 主容器 --- */
.contact-container {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 40px;
max-width: 900px;
width: 100%;
}
h1 {
text-align: center;
color: #1a1a1a;
margin-bottom: 40px;
font-size: 28px;
}
/* --- 联系方式网格布局 --- */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
/* --- 单个联系方式卡片 --- */
.contact-card {
background-color: #fafafa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 25px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* --- 图标样式 --- */
.contact-icon {
width: 80px;
height: 80px;
margin: 0 auto 15px;
background-color: #f0f2f5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
.qq-icon {
color: #12b7f5; /* QQ蓝 */
}
.wechat-icon {
color: #07c160; /* 微信绿 */
}
.group-icon {
color: #ff9500; /* QQ群橙 */
}
/* --- 标题和描述 --- */
.contact-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
color: #1a1a1a;
}
.contact-description {
font-size: 14px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
/* --- 二维码图片样式 --- */
.qr-code {
width: 120px;
height: 120px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ddd;
padding: 5px;
border-radius: 4px;
}
/* --- 按钮样式 --- */
.contact-button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 15px;
}
.contact-button:hover {
background-color: #0056b3;
}
/* --- 复制成功提示 --- */
.copy-success {
position: fixed;
top: 20px;
right: 20px;
background-color: #28a745;
color: white;
padding: 12px 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1000;
}
.copy-success.show {
opacity: 1;
}
</style>
</head>
<body>
<div class="contact-container">
<h1>联系我们</h1>
<div class="contact-grid">
<!-- QQ 客服卡片 -->
<div class="contact-card" onclick="copyToClipboard('123456789', 'QQ号')">
<div class="contact-icon qq-icon">Q</div>
<h3 class="contact-title">QQ 客服</h3>
<p class="contact-description">工作时间：周一至周五 9:00-18:00</p>
<!-- 请替换为你的QQ客服二维码 -->
<img src="https://via.placeholder.com/120x120.png?text=QQ+客服二维码" alt="QQ客服二维码" class="qr-code">
<button class="contact-button">复制QQ号</button>
</div>
<!-- 微信客服卡片 -->
<div class="contact-card" onclick="copyToClipboard('your_wechat_id', '微信号')">
<div class="contact-icon wechat-icon">W</div>
<h3 class="contact-title">微信客服</h3>
<p class="contact-description">扫码添加好友，随时为您解答</p>
<!-- 请务必替换为你的微信二维码图片 -->
<img src="https://via.placeholder.com/120x120.png?text=微信二维码" alt="微信二维码" class="qr-code">
<button class="contact-button">复制微信号</button>
</div>
<!-- QQ 群卡片 -->
<div class="contact-card" onclick="copyToClipboard('987654321', 'QQ群号')">
<div class="contact-icon group-icon">G</div>
<h3 class="contact-title">官方QQ群</h3>
<p class="contact-description">加入群聊，与更多用户交流</p>
<!-- 请务必替换为你的QQ群二维码图片 -->
<img src="https://via.placeholder.com/120x120.png?text=QQ群二维码" alt="QQ群二维码" class="qr-code">
<button class="contact-button">复制群号</button>
</div>
</div>
</div>
<!-- 复制成功提示 -->
<div id="copySuccess" class="copy-success">信息已复制到剪贴板！</div>
<script>
/**
* 复制文本到剪贴板
* @param {string} text - 要复制的文本
* @param {string} type - 复制内容的类型（如“QQ号”、“微信号”）
*/
function copyToClipboard(text, type) {
// 创建一个临时的textarea元素
const textarea = document.createElement('textarea');
textarea.value = text;
// 使其不可见
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
// 添加到页面中
document.body.appendChild(textarea);
// 选中并复制
textarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
showCopySuccess(`${type}已复制！`);
}
} catch (err) {
// 如果复制失败，可以在这里处理
console.error('复制失败:', err);
showCopySuccess('复制失败，请手动复制');
}
// 移除临时元素
document.body.removeChild(textarea);
}
/**
* 显示复制成功的提示
* @param {string} message - 提示信息
*/
function showCopySuccess(message) {
const successDiv = document.getElementById('copySuccess');
successDiv.textContent = message;
successDiv.classList.add('show');
// 3秒后自动隐藏提示
setTimeout(() => {
successDiv.classList.remove('show');
}, 3000);
}
</script>
</body>
</html>
如何使用和修改
-
保存文件: 将上面的完整代码复制，粘贴到一个新的文本文件中，并将其命名为
contact.html。 -
替换二维码图片:
-
找到代码中的
<img> -
将
src属性中的https://via.placeholder.com/...替换为你自己的二维码图片链接。
（图片来源网络，侵删） -
示例:
<!-- 你的QQ客服二维码 --> <img src="path/to/your/qq_service_qr.png" alt="QQ客服二维码" class="qr-code"> <!-- 你的微信二维码 --> <img src="path/to/your/wechat_qr.png" alt="微信二维码" class="qr-code"> <!-- 你的QQ群二维码 --> <img src="path/to/your/qq_group_qr.png" alt="QQ群二维码" class="qr-code">
-
-
修改联系方式信息:
- QQ号: 在第一个卡片的
copyToClipboard函数中，将'123456789'替换为你的QQ客服号码。 - 微信号: 在第二个卡片的
copyToClipboard函数中，将'your_wechat_id'替换为你的微信号。 - QQ群号: 在第三个卡片的
copyToClipboard函数中，将'987654321'替换为你的QQ群号码。 - 描述文字: 你可以修改
<p class="contact-description">...</p>中的文字,使其更符合你的需求。
- QQ号: 在第一个卡片的
-
打开网页: 直接用浏览器（如 Chrome, Edge, Firefox）打开
contact.html文件,你就能看到一个美观的联系页面了。
代码详解
HTML
<div class="contact-container">: 整个页面的主容器,用于居中和添加阴影效果。<div class="contact-grid">: 使用 CSS Grid 布局，可以灵活地将三个联系方式卡片排列成一行（在宽屏上）或多列（在窄屏上）。<div class="contact-card">: 每个联系方式的独立卡片，包含了图标、标题、描述、二维码和按钮。<img>: 用于展示二维码。src属性是你需要修改的核心部分。<button>: 按钮元素，点击后会触发 JavaScript 函数。<div id="copySuccess">: 一个隐藏的提示框,当复制成功后会显示出来。
CSS
body: 设置了页面背景色、字体和让内容居中的 Flexbox 布局。.contact-grid:grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));是一个现代且强大的布局，它会自动根据容器宽度调整列数,每列最小宽度为250px。.contact-card: 卡片的基本样式，包括圆角、内边距。transition属性为hover效果（上浮和阴影）提供了平滑的动画。.contact-icon: 定义了图标的样式，这里用字母代替，你也可以换成真实的小图标（如使用font-awesome或其他图标库）。.copy-success: 定义了复制成功提示框的样式，包括位置、颜色和透明度变化。
JavaScript
copyToClipboard(text, type):- 这是核心功能，它创建一个临时的、不可见的
textarea元素。 - 将需要复制的文本（如QQ号）放入这个
textarea中。 document.execCommand('copy')是一个执行复制的命令。- 复制成功后，调用
showCopySuccess函数来显示提示。
- 这是核心功能，它创建一个临时的、不可见的
showCopySuccess(message):- 找到提示框的
div元素。 - （如“QQ号已复制！”）。
- 添加
.show类来显示它（通过改变opacity）。 - 使用
setTimeout在3秒后移除.show类,使其自动消失。
- 找到提示框的
这套代码结构清晰，易于修改和扩展,希望能满足你的需求！
（图片来源网络，侵删）
