我来为您创建一个现代化的联系我们网页,包含联系表单、公司信息和交互效果。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">联系我们 - 您的合作伙伴</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--text-color: #1f2937;
--light-gray: #f3f4f6;
--border-color: #e5e7eb;
--success-color: #10b981;
--error-color: #ef4444;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #ffffff;
}
/* Header Styles */
header {
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
nav {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
.logo:hover {
color: var(--secondary-color);
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--primary-color);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 4rem 2rem;
text-align: center;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
animation: fadeInUp 0.8s ease;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
animation: fadeInUp 0.8s ease 0.2s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Main Content */
main {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 2rem;
}
/* Contact Info Section */
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.info-card {
background: var(--light-gray);
padding: 2rem;
border-radius: 12px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.info-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
color: white;
}
.info-card h3 {
margin-bottom: 0.5rem;
color: var(--secondary-color);
}
/* Contact Form Section */
.contact-form-section {
background: var(--light-gray);
padding: 3rem;
border-radius: 12px;
margin-bottom: 3rem;
}
.contact-form-section h2 {
text-align: center;
margin-bottom: 2rem;
color: var(--text-color);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text-color);
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
input:focus,
textarea:focus {
outline: none;
border-color: var(--primary-color);
}
textarea {
resize: vertical;
min-height: 120px;
}
.submit-btn {
background: var(--primary-color);
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
display: block;
margin: 0 auto;
}
.submit-btn:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
.submit-btn:active {
transform: translateY(0);
}
/* Map Section */
.map-section {
margin-bottom: 3rem;
}
.map-section h2 {
text-align: center;
margin-bottom: 2rem;
}
.map-container {
height: 400px;
background: #e5e7eb;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.map-placeholder {
text-align: center;
color: #6b7280;
}
.map-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
/* FAQ Section */
.faq-section {
background: var(--light-gray);
padding: 3rem;
border-radius: 12px;
}
.faq-section h2 {
text-align: center;
margin-bottom: 2rem;
}
.faq-item {
background: white;
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.faq-question {
padding: 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background: #f9fafb;
}
.faq-answer {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-answer.active {
padding: 0 1.5rem 1.5rem;
max-height: 200px;
}
.faq-icon {
transition: transform 0.3s ease;
}
.faq-icon.active {
transform: rotate(180deg);
}
/* Success Message */
.success-message {
position: fixed;
top: 20px;
right: 20px;
background: var(--success-color);
color: white;
padding: 1rem 2rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateX(400px);
transition: transform 0.3s ease;
z-index: 2000;
}
.success-message.show {
transform: translateX(0);
}
/* Footer */
footer {
background: var(--text-color);
color: white;
text-align: center;
padding: 2rem;
margin-top: 4rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2rem;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-form-section {
padding: 2rem 1rem;
}
}
</style>
</head>
<body>
<header>
<nav>
<a href="#" class="logo">您的公司</a>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact" class="active">联系我们</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>联系我们</h1>
<p>我们随时准备为您提供专业的服务和解决方案，请随时与我们联系，我们将尽快回复您。</p>
</section>
<main>
<!-- Contact Information -->
<section class="contact-info">
<div class="info-card">
<div class="info-icon">📍</div>
<h3>公司地址</h3>
<p>北京市朝阳区<br>建国门外大街1号<br>国贸大厦A座2801室</p>
</div>
<div class="info-card">
<div class="info-icon">📞</div>
<h3>联系电话</h3>
<p>总机：010-12345678<br>销售：138-0000-0000<br>客服：400-123-4567</p>
</div>
<div class="info-card">
<div class="info-icon">✉️</div>
<h3>电子邮箱</h3>
<p>info@yourcompany.com<br>sales@yourcompany.com<br>support@yourcompany.com</p>
</div>
</section>
<!-- Contact Form -->
<section class="contact-form-section">
<h2>发送消息</h2>
<form id="contactForm">
<div class="form-row">
<div class="form-group">
<label for="firstName">姓名 *</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">姓氏 *</label>
<input type="text" id="lastName" name="lastName" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="email">电子邮箱 *</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">电话号码</label>
<input type="tel" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<label for="subject">主题 *</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">消息内容 *</label>
<textarea id="message" name="message" required placeholder="请输入您的消息..."></textarea>
</div>
<button type="submit" class="submit-btn">发送消息</button>
</form>
</section>
<!-- Map Section -->
<section class="map-section">
<h2>我们的位置</h2>
<div class="map-container">
<div class="map-placeholder">
<img src="https://picsum.photos/seed/map123/1200/400.jpg" alt="公司位置地图">
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="faq-section">
<h2>常见问题</h2>
<div class="faq-item">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>你们的营业时间是？</span>
<span class="faq-icon">▼</span>
</div>
<div class="faq-answer">
<p>我们的营业时间是周一至周五，上午9:00至下午6:00，周末和节假日正常营业，时间为上午10:00至下午5:00。</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>如何预约咨询？</span>
<span class="faq-icon">▼</span>
</div>
<div class="faq-answer">
<p>您可以通过以下方式预约咨询：1. 在线填写联系表单；2. 拨打我们的客服热线；3. 发送邮件至指定邮箱，我们会在24小时内与您联系确认预约时间。</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question" onclick="toggleFAQ(this)">
<span>你们提供哪些服务？</span>
<span class="faq-icon">▼</span>
</div>
<div class="faq-answer">
<p>我们提供全方位的专业服务，包括：咨询服务、技术支持、产品定制、售后维护等，具体服务内容请查看我们的服务页面或直接联系我们。</p>
</div>
</div>
</section>
</main>
<footer>
<p>© 2025 您的公司. 保留所有权利.</p>
</footer>
<!-- Success Message -->
<div class="success-message" id="successMessage">
消息已成功发送！我们会尽快回复您。
</div>
<script>
// Form submission
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// Simulate form submission
console.log('Form submitted:', data);
// Show success message
const successMessage = document.getElementById('successMessage');
successMessage.classList.add('show');
// Reset form
this.reset();
// Hide success message after 3 seconds
setTimeout(() => {
successMessage.classList.remove('show');
}, 3000);
});
// FAQ toggle
function toggleFAQ(element) {
const answer = element.nextElementSibling;
const icon = element.querySelector('.faq-icon');
answer.classList.toggle('active');
icon.classList.toggle('active');
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add scroll effect to header
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 100) {
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
} else {
header.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.1)';
}
});
</script>
</body>
</html>
这个联系我们网页包含了以下功能特点：
- 响应式设计 - 适配各种设备屏幕
- 联系信息展示 - 地址、电话、邮箱等信息卡片
- 交互式联系表单 - 包含表单验证和提交反馈
- 地图展示 - 显示公司位置
- FAQ折叠面板 - 常见问题解答
- 动画效果 - 淡入动画、悬停效果、平滑滚动
- 成功提示 - 表单提交后的友好反馈
页面采用了现代化的设计风格,配色专业，交互流畅，用户体验良好，您可以根据实际需求修改联系信息、公司名称等内容。
