现代企业官网模板设计与实现
我将为您创建一个现代、专业的企业官网模板，包含响应式设计和完整的功能模块。
设计思路
这个模板将包含：
- 现代化UI设计,采用渐变色与卡片式布局
- 完整的页面结构：首页、服务、案例、博客、联系
- 响应式设计,适配不同设备尺寸
- 轻量级JavaScript交互效果
- 易于定制的CSS变量系统
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">创科企业 - 现代化企业官网模板</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--secondary: #8b5cf6;
--accent: #06b6d4;
--light: #f8fafc;
--dark: #0f172a;
--gray: #64748b;
--light-gray: #e2e8f0;
--border-radius: 12px;
--shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
line-height: 1.6;
color: var(--dark);
background-color: #f9fafb;
overflow-x: hidden;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 导航栏样式 */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
padding: 15px 0;
transition: var(--transition);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
display: flex;
align-items: center;
}
.logo i {
margin-right: 8px;
color: var(--secondary);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--dark);
font-weight: 500;
font-size: 1.05rem;
transition: var(--transition);
position: relative;
padding: 5px 0;
}
.nav-links a:hover {
color: var(--primary);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-btn {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border: none;
padding: 10px 25px;
border-radius: 50px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
font-size: 1rem;
box-shadow: var(--shadow);
}
.nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.15);
}
.hamburger {
display: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--dark);
}
/* 头部区域样式 */
.hero {
padding: 180px 0 100px;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
position: relative;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 650px;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: var(--dark);
}
.highlight {
color: var(--primary);
position: relative;
}
.hero p {
font-size: 1.2rem;
color: var(--gray);
margin-bottom: 30px;
max-width: 600px;
}
.hero-btns {
display: flex;
gap: 15px;
margin-top: 30px;
}
.btn {
padding: 14px 32px;
border-radius: 50px;
font-weight: 500;
font-size: 1.05rem;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
display: inline-block;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
box-shadow: var(--shadow);
border: none;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.15);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline:hover {
background-color: var(--primary);
color: white;
}
.hero-image {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 45%;
max-width: 600px;
z-index: 1;
}
/* 服务区域样式 */
.section {
padding: 100px 0;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--dark);
margin-bottom: 15px;
}
.section-title p {
color: var(--gray);
max-width: 600px;
margin: 0 auto;
}
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
background: white;
border-radius: var(--border-radius);
padding: 40px 30px;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
color: white;
font-size: 2rem;
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--dark);
}
.service-card p {
color: var(--gray);
margin-bottom: 20px;
}
.service-link {
color: var(--primary);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
transition: var(--transition);
}
.service-link:hover {
color: var(--secondary);
}
.service-link i {
margin-left: 5px;
transition: var(--transition);
}
.service-link:hover i {
transform: translateX(5px);
}
/* 关于区域样式 */
.about {
background-color: var(--light);
}
.about-content {
display: flex;
align-items: center;
gap: 60px;
}
.about-image {
flex: 1;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.about-image img {
width: 100%;
height: auto;
display: block;
transition: var(--transition);
}
.about-image:hover img {
transform: scale(1.05);
}
.about-text {
flex: 1;
}
.about-text h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--dark);
}
.about-text p {
color: var(--gray);
margin-bottom: 25px;
}
.stats {
display: flex;
gap: 30px;
margin-top: 40px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 5px;
}
.stat-text {
color: var(--gray);
font-size: 1.05rem;
}
/* 作品集样式 */
.portfolio-filters {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.filter-btn {
background: transparent;
border: 2px solid var(--light-gray);
color: var(--gray);
padding: 8px 20px;
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
font-weight: 500;
}
.filter-btn.active, .filter-btn:hover {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border-color: transparent;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.portfolio-item {
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
position: relative;
cursor: pointer;
}
.portfolio-image {
width: 100%;
height: 280px;
background-color: #ddd;
position: relative;
overflow: hidden;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(139, 92, 246, 0.8));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-info {
padding: 25px;
background: white;
}
.portfolio-info h3 {
font-size: 1.4rem;
margin-bottom: 10px;
color: var(--dark);
}
.portfolio-info p {
color: var(--gray);
}
/* 联系区域样式 */
.contact {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
}
.contact-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 60px;
}
.contact-info h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--dark);
}
.contact-details {
margin-bottom: 40px;
}
.contact-item {
display: flex;
margin-bottom: 25px;
align-items: flex-start;
}
.contact-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
margin-right: 15px;
flex-shrink: 0;
}
.contact-text h4 {
font-size: 1.2rem;
margin-bottom: 5px;
color: var(--dark);
}
.contact-text p, .contact-text a {
color: var(--gray);
text-decoration: none;
transition: var(--transition);
}
.contact-text a:hover {
color: var(--primary);
}
.social-links {
display: flex;
gap: 15px;
}
.social-link {
width: 45px;
height: 45px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.2rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
.social-link:hover {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
transform: translateY(-5px);
}
.contact-form {
background: white;
padding: 40px;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--dark);
}
.form-control {
width: 100%;
padding: 14px 20px;
border: 2px solid var(--light-gray);
border-radius: 10px;
font-family: inherit;
font-size: 1rem;
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
/* 页脚样式 */
.footer {
background: var(--dark);
color: white;
padding: 80px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.footer-col h4 {
font-size: 1.4rem;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 15px;
}
.footer-links a {
color: #cbd5e1;
text-decoration: none;
transition: var(--transition);
display: flex;
align-items: center;
}
.footer-links a i {
margin-right: 10px;
font-size: 0.9rem;
}
.footer-links a:hover {
color: white;
transform: translateX(5px);
}
.footer-newsletter p {
color: #cbd5e1;
margin-bottom: 20px;
}
.newsletter-form {
display: flex;
}
.newsletter-input {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 50px 0 0 50px;
font-family: inherit;
font-size: 1rem;
}
.newsletter-btn {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border: none;
padding: 0 25px;
border-radius: 0 50px 50px 0;
cursor: pointer;
font-weight: 500;
transition: var(--transition);
}
.newsletter-btn:hover {
opacity: 0.9;
}
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
font-size: 0.95rem;
}
/* 响应式设计 */
@media (max-width: 992px) {
.hero h1 {
font-size: 3rem;
}
.hero-image {
width: 40%;
}
.about-content {
flex-direction: column;
}
}
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 70px;
left: 0;
background: white;
width: 100%;
flex-direction: column;
align-items: center;
padding: 20px 0;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
transform: translateY(-150%);
transition: var(--transition);
}
.nav-links.active {
transform: translateY(0);
}
.nav-links li {
margin: 15px 0;
}
.hamburger {
display: block;
}
.hero {
padding: 150px 0 80px;
}
.hero-content {
text-align: center;
margin: 0 auto;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
margin: 0 auto 30px;
}
.hero-image {
display: none;
}
.hero-btns {
justify-content: center;
}
.section-title h2 {
font-size: 2.2rem;
}
.stats {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2.2rem;
}
.hero-btns {
flex-direction: column;
align-items: center;
}
.section {
padding: 70px 0;
}
.section-title h2 {
font-size: 2rem;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container nav-container">
<a href="#" class="logo"><i class="fas fa-rocket"></i>创科企业</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="#portfolio">案例</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
<button class="nav-btn">开始合作</button>
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- 头部区域 -->
<header class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1>创新科技<span class="highlight">驱动未来</span> 助力企业数字化转型</h1>
<p>我们提供专业的数字化解决方案，帮助企业提升效率、优化流程、增强竞争力，在数字化时代实现突破性增长。</p>
<div class="hero-btns">
<a href="#services" class="btn btn-primary">探索服务</a>
<a href="#contact" class="btn btn-outline">联系我们</a>
</div>
</div>
<div class="hero-image">
<svg viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg">
<path fill="#dbeafe" d="M47.5,-78.9C62.3,-71.1,75.3,-59.1,85.6,-44.3C95.9,-29.5,103.5,-12,104.5,6.4C105.5,24.8,99.8,44,89.1,59.8C78.4,75.5,62.6,87.7,45.4,93.8C28.2,99.9,9.6,99.8,-8.6,97.3C-26.9,94.7,-44.7,89.6,-58.1,79.3C-71.5,69,-80.4,53.5,-87.5,37.4C-94.7,21.3,-100.1,4.6,-98.2,-11.1C-96.3,-26.8,-87.1,-41.4,-75.5,-54.3C-63.8,-67.2,-49.7,-78.4,-34.4,-85.8C-19.1,-93.3,-2.6,-97,16.4,-92.6C35.3,-88.2,32.7,-86.7,47.5,-78.9Z" transform="translate(300 250)" />
</svg>
</div>
</div>
</header>
<!-- 服务区域 -->
<section class="section" id="services">
<div class="container">
<div class="section-title">
<h2>我们的专业服务</h2>
<p>提供全方位数字化解决方案，助力企业转型升级</p>
</div>
<div class="services">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-laptop-code"></i>
</div>
<h3>网站开发</h3>
<p>专业的企业官网、电商平台、后台管理系统开发，响应式设计，SEO优化，提升品牌形象和用户体验。</p>
<a href="#" class="service-link">了解更多 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3>移动应用</h3>
<p>iOS和Android原生应用开发，跨平台解决方案，高性能、高安全性，为企业提供移动端业务支持。</p>
<a href="#" class="service-link">了解更多 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-cloud"></i>
</div>
<h3>云服务</h3>
<p>云计算解决方案，包括云迁移、云架构设计、云安全、云存储和云数据库服务，提高业务灵活性和可扩展性。</p>
<a href="#" class="service-link">了解更多 <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- 关于区域 -->
<section class="section about" id="about">
<div class="container">
<div class="about-content">
<div class="about-image">
<div style="background:linear-gradient(135deg, #3b82f6, #8b5cf6); height:400px; display:flex; align-items:center; justify-content:center; color:white; font-size:1.5rem;">
<i class="fas fa-building fa-3x"></i>
</div>
</div>
<div class="about-text">
<h2>创新驱动，技术领先</h2>
<p>创科企业成立于2015年，是一家专注于企业数字化解决方案的高科技公司，我们拥有一支由资深工程师、设计师和行业专家组成的团队。</p>
<p>秉承"创新、专业、高效"的理念，我们已为超过500家企业提供了优质的数字化服务，涵盖金融、教育、医疗、零售等多个行业领域。</p>
<div class="stats">
<div class="stat-item">
<div class="stat-number">500+</div>
<div class="stat-text">服务企业</div>
</div>
<div class="stat-item">
<div class="stat-number">120+</div>
<div class="stat-text">专业团队</div>
</div>
<div class="stat-item">
<div class="stat-number">98%</div>
<div class="stat-text">客户满意度</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 作品集区域 -->
<section class="section" id="portfolio">
<div class="container">
<div class="section-title">
<h2>成功案例</h2>
<p>我们为各行业客户打造的数字化解决方案</p>
</div>
<div class="portfolio-filters">
<button class="filter-btn active">全部</button>
<button class="filter-btn">网站开发</button>
<button class="filter-btn">移动应用</button>
<button class="filter-btn">企业系统</button>
</div>
<div class="portfolio-grid">
<div class="portfolio-item">
<div class="portfolio-image">
<div style="background:#c7d2fe; height:100%;"></div>
<div class="portfolio-overlay">
<i class="fas fa-search-plus fa-3x" style="color:white;"></i>
</div>
</div>
<div class="portfolio-info">
<h3>金融科技平台</h3>
<p>为知名金融机构打造的安全、高效交易平台</p>
</div>
</div>
<div class="portfolio-item">
<div class="portfolio-image">
<div style="background:#bbf7d0; height:100%;"></div>
<div class="portfolio-overlay">
<i class="fas fa-search-plus fa-3x" style="color:white;"></i>
</div>
</div>
<div class="portfolio-info">
<h3>教育管理系统</h3>
<p>高校智能化教学管理与学习平台</p>
</div>
</div>
<div class="portfolio-item">
<div class="portfolio-image">
<div style="background:#fecaca; height:100%;"></div>
<div class="portfolio-overlay">
<i class="fas fa-search-plus fa-3x" style="color:white;"></i>
</div>
</div>
<div class="portfolio-info">
<h3>电商移动应用</h3>
<p>全渠道零售企业的移动购物体验</p>
</div>
</div>
</div>
</div>
</section>
<!-- 联系区域 -->
<section class="section contact" id="contact">
<div class="container">
<div class="section-title">
<h2>联系我们</h2>
<p>随时为您提供专业的咨询服务</p>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>获取专业咨询</h3>
<div class="contact-details">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h4>公司地址</h4>
<p>北京市海淀区科技园区88号创新大厦15层</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="contact-text">
<h4>联系电话</h4>
<p>+86 10 8888 7777</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h4>电子邮箱</h4>
<p><a href="mailto:contact@chuangke.com">contact@chuangke.com</a></p>
</div>
</div>
</div>
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="contact-form">
<form>
<div class="form-group">
<label for="name">您的姓名</label>
<input type="text" id="name" class="form-control" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="email">电子邮箱</label>
<input type="email" id="email" class="form-control" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="phone">联系电话</label>
<input type="tel" id="phone" class="form-control" placeholder="请输入电话">
</div>
<div class="form-group">
<label for="message">咨询内容</label>
<textarea id="message" class="form-control" placeholder="请描述您的需求"></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width:100%;">提交咨询</button>
</form>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h4>创科企业</h4>
<p style="color:#cbd5e1; margin-bottom:20px;">专业的企业数字化解决方案提供商，助力企业实现数字化转型与升级。</p>
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="footer-col">
<h4>快速链接</h4>
<ul class="footer-links">
<li><a href="#home"><i class="fas fa-chevron-right"></i> 首页</a></li>
<li><a href="#about"><i class="fas fa-chevron-right"></i> 关于我们</a></li>
<li><a href="#services"><i class="fas fa-chevron-right"></i> 服务项目</a></li>
<li><a href="#portfolio"><i class="fas fa-chevron-right"></i> 成功案例</a></li>
<li><a href="#contact"><i class="fas fa-chevron-right"></i> 联系我们</a></li>
</ul>
</div>
<div class="footer-col">
<h4>服务项目</h4>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> 网站开发</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 移动应用</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 云服务</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 系统集成</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 技术咨询</a></li>
</ul>
</div>
<div class="footer-col footer-newsletter">
<h4>订阅资讯</h4>
<p>订阅我们的新闻通讯，获取最新行业动态和技术分享。</p>
<form class="newsletter-form">
<input type="email" placeholder="请输入邮箱" class="newsletter-input">
<button type="submit" class="newsletter-btn">订阅</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 创科企业 版权所有，保留所有权利。</p>
</div>
</div>
</footer>
<script>
// 导航栏交互
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
hamburger.querySelector('i').classList.toggle('fa-bars');
hamburger.querySelector('i').classList.toggle('fa-times');
});
// 滚动时导航栏效果
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.padding = '10px 0';
navbar.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)';
} else {
navbar.style.padding = '15px 0';
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
}
});
// 作品集过滤
const filterBtns = document.querySelectorAll('.filter-btn');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 移除所有按钮的active类
filterBtns.forEach(b => b.classList.remove('active'));
// 给当前点击的按钮添加active类
btn.classList.add('active');
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop - 70,
behavior: 'smooth'
});
// 移动端关闭菜单
if (navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
hamburger.querySelector('i').classList.add('fa-bars');
hamburger.querySelector('i').classList.remove('fa-times');
}
}
});
});
</script>
</body>
</html>
模板特点
-
现代化设计元素：
- 渐变色主题与卡片式布局
- 平滑过渡动画和悬停效果
- 精心设计的排版与间距
-
完整的功能模块：
- 响应式导航栏（带移动端汉堡菜单）
- 吸引人的头部区域（Hero Section）
- 服务展示区域
- 关于我们介绍
- 作品集展示
- 联系表单
- 多列页脚
-
响应式设计：
- 完美适配桌面、平板和手机设备
- 移动端优化的导航菜单
- 响应式网格布局
-
交互功能：
- 平滑滚动导航
- 作品集过滤功能
- 表单验证（需后端支持）
- 滚动时导航栏效果变化
-
易于定制：
- 使用CSS变量统一管理颜色和尺寸
- 模块化代码结构
- 清晰的注释说明
这个模板可以直接使用,您只需替换内容、图片和颜色方案即可快速部署企业官网，模板使用了纯前端技术（HTML/CSS/JS），不需要任何后端支持即可运行。
图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/291011.html
