[网站模板]企业官网
2025年9月7日
相关文章
[网站模板]企业公司官网
2025年9月2日
响应式设计：网站布局会自动调整以适应各种屏幕尺寸，从手机到桌面设备 暗黑模式：点击右上角按钮可在亮色和暗黑主题之间切换 现代UI设计：采用简洁、专业的设计风格，符合企业官网定位 平滑滚动：导航菜单点击后平滑滚动到对应区域 移动友好：在移动设备上显示汉堡菜单，优化小屏幕体验 这个模板包含了企业官网常用的所有部分：导航栏、英雄区域、服务介绍、关于我们、项目案例、联系表单和页脚。
[网站模板]响应式公司官网首页
2025年7月10日
这是一个现代、专业的响应式公司官网首页，包含导航栏、大字宣传区域、服务介绍、关于我们、客户评价和页脚等核心元素。使用Flexbox和Grid实现灵活的响应式布局，采用现代简约的设计风格，实现移动端友好的导航菜单，使用CSS变量确保主题一致性，添加平滑的动画效果增强用户体验。
[网站模板]全球贸易解决方案公司企业官网
文章摘要：响应式设计：网站布局会自适应各种屏幕尺寸，从移动设备到桌面显示器
暗黑模式：用户可切换亮色/暗色主题，偏好设置会保存在本地
现代化UI：采用简洁清晰的设计风格，注重用户体验
平滑滚动：导航链接提供平滑滚动效果
移动端菜单：在小屏幕设备上显示汉堡菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GlobalTrade - 外贸解决方案专家</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2563eb;
--secondary-color: #3b82f6;
--text-color: #1f2937;
--bg-color: #f8fafc;
--card-bg: #ffffff;
--header-bg: rgba(255, 255, 255, 0.95);
--footer-bg: #1e293b;
--border-color: #e2e8f0;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
.dark-mode {
--primary-color: #3b82f6;
--secondary-color: #60a5fa;
--text-color: #e2e8f0;
--bg-color: #0f172a;
--card-bg: #1e293b;
--header-bg: rgba(30, 41, 59, 0.95);
--footer-bg: #0f172a;
--border-color: #334155;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: var(--transition);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 导航栏样式 */
header {
background-color: var(--header-bg);
box-shadow: var(--shadow);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
position: relative;
}
.nav-links a:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary-color);
transition: var(--transition);
}
.nav-links a:hover:after {
width: 100%;
}
.theme-toggle {
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
font-size: 1.2rem;
margin-left: 20px;
}
.hamburger {
display: none;
background: none;
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
}
/* 主内容区域 */
main {
margin-top: 80px;
}
section {
padding: 80px 0;
}
.hero {
display: flex;
align-items: center;
min-height: 80vh;
}
.hero-content {
flex: 1;
}
.hero-image {
flex: 1;
text-align: center;
}
.hero-image img {
max-width: 100%;
border-radius: 10px;
box-shadow: var(--shadow);
}
h1 {
font-size: 3.5rem;
margin-bottom: 20px;
color: var(--primary-color);
}
h2 {
font-size: 2.5rem;
margin-bottom: 30px;
text-align: center;
color: var(--primary-color);
}
p {
margin-bottom: 20px;
font-size: 1.1rem;
}
.btn {
display: inline-block;
background-color: var(--primary-color);
color: white;
padding: 12px 30px;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
margin-top: 20px;
transition: var(--transition);
}
.btn:hover {
background-color: var(--secondary-color);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* 产品展示 */
.products {
background-color: var(--card-bg);
border-radius: 10px;
padding: 40px;
box-shadow: var(--shadow);
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.product-card {
background-color: var(--bg-color);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
}
.product-img {
height: 200px;
background-color: var(--secondary-color);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.product-content {
padding: 20px;
}
.product-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--primary-color);
}
/* 关于我们 */
.about-content {
display: flex;
align-items: center;
gap: 40px;
}
.about-text {
flex: 1;
}
.about-image {
flex: 1;
text-align: center;
}
.about-image img {
max-width: 100%;
border-radius: 10px;
box-shadow: var(--shadow);
}
/* 联系表单 */
.contact-form {
background-color: var(--card-bg);
padding: 40px;
border-radius: 10px;
box-shadow: var(--shadow);
max-width: 800px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
}
.form-group textarea {
min-height: 150px;
}
/* 页脚 */
footer {
background-color: var(--footer-bg);
color: #e2e8f0;
padding: 60px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-column h3 {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--secondary-color);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column a {
color: #cbd5e1;
text-decoration: none;
}
.footer-column a:hover {
color: var(--secondary-color);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #334155;
border-radius: 50%;
color: white;
font-size: 1.2rem;
transition: var(--transition);
}
.social-links a:hover {
background-color: var(--primary-color);
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid #334155;
}
.copyright a {
color: inherit;
text-decoration: none;
}
/* 响应式设计 */
@media (max-width: 992px) {
h1 {
font-size: 2.8rem;
}
h2 {
font-size: 2.2rem;
}
.hero, .about-content {
flex-direction: column;
gap: 40px;
}
.hero-content, .about-text {
order: 2;
}
.hero-image, .about-image {
order: 1;
}
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background-color: var(--card-bg);
flex-direction: column;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.nav-links.active {
left: 0;
}
.nav-links li {
margin: 20px 0;
}
.products, .contact-form {
padding: 30px 20px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.8rem;
}
section {
padding: 60px 0;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header>
<div class="container">
<nav>
<a href="#" class="logo">
<i class="fas fa-globe-americas"></i>
GlobalTrade
</a>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#products">服务产品</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
<li>
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
</li>
</ul>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
</nav>
</div>
</header>
<!-- 主内容区域 -->
<main>
<!-- 大区域 -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1>全球贸易解决方案专家</h1>
<p>
我们提供高质量的产品和专业的国际贸易服务，帮助您的业务扩展到全球市场。凭借多年的行业经验，我们已成为众多企业的可靠合作伙伴。</p>
<a href="#contact" class="btn">联系我们</a>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1560472355-536de3962603?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="Global Trade">
</div>
</div>
</section>
<!-- 服务产品展示 -->
<section id="products">
<div class="container">
<h2>我们的服务产品</h2>
<div class="products">
<div class="product-grid">
<div class="product-card">
<div class="product-img">
<i class="fas fa-industry"></i>
</div>
<div class="product-content">
<h3>A服务</h3>
<p>提供A服务解决方案，提供出海效率，降低运营成本。</p>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-cogs"></i>
</div>
<div class="product-content">
<h3>B服务</h3>
<p>提供B服务解决方案，提供出海效率，降低运营成本。</p>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-boxes"></i>
</div>
<div class="product-content">
<h3>C服务</h3>
<p>提供C服务解决方案，提供出海效率，降低运营成本。</p>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-industry"></i>
</div>
<div class="product-content">
<h3>A服务</h3>
<p>提供A服务解决方案，提供出海效率，降低运营成本。</p>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-cogs"></i>
</div>
<div class="product-content">
<h3>B服务</h3>
<p>提供B服务解决方案，提供出海效率，降低运营成本。</p>
</div>
</div>
<div class="product-card">
<div class="product-img">
<i class="fas fa-boxes"></i>
</div>
<div class="product-content">
<h3>C服务</h3>
<p>提供C服务解决方案，提供出海效率，降低运营成本。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 关于我们 -->
<section id="about">
<div class="container">
<h2>关于我们</h2>
<div class="about-content">
<div class="about-text">
<p>
GlobalTrade成立于2010年，是一家专注于国际贸易的公司。我们致力于为客户提供高质量的产品和专业的服务。</p>
<p>
我们的团队由经验丰富的贸易专家组成，他们熟悉全球市场的规则和需求，能够为客户提供最佳的贸易解决方案。</p>
<p>多年来，我们已经与全球50多个国家的客户建立了长期合作关系，成为他们信赖的贸易伙伴。</p>
<a href="#contact" class="btn">了解更多</a>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="About Us">
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact">
<div class="container">
<h2>联系我们</h2>
<div class="contact-form">
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="tel">电话</label>
<input type="tel" id="tel" placeholder="请输入您的电话">
</div>
<div class="form-group">
<label for="message">留言</label>
<textarea id="message" placeholder="请输入您的留言"></textarea>
</div>
<button type="submit" class="btn">提交</button>
</form>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>GlobalTrade</h3>
<p>提供专业的全球贸易解决方案，帮助您的业务扩展到国际市场。</p>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
</div>
<div class="footer-column">
<h3>快速链接</h3>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#products">服务产品</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
<div class="footer-column">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 广州市黄埔区国立中山科技园10086号C9</li>
<li><i class="fas fa-phone"></i> +86 020 9999 8888</li>
<li><i class="fas fa-envelope"></i> q@tomde.cloud</li>
</ul>
</div>
</div>
<div class="copyright">
<p>© <a href="https://www.tomde.cloud" target="_blank">本站由www.tomde.cloud提供</a></p>
</div>
</div>
</footer>
<script>
// 暗黑模式切换
const themeToggle = document.getElementById('themeToggle');
const themeIcon = themeToggle.querySelector('i');
// 检查本地存储的主题偏好
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
}
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
localStorage.setItem('theme', 'light');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
});
// 移动端菜单切换
const hamburger = document.getElementById('hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
if (navLinks.classList.contains('active')) {
hamburger.innerHTML = '<i class="fas fa-times"></i>';
} else {
hamburger.innerHTML = '<i class="fas fa-bars"></i>';
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
// 关闭移动端菜单
navLinks.classList.remove('active');
hamburger.innerHTML = '<i class="fas fa-bars"></i>';
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>