模板特点
- HTML5 语义化标签: 使用
<header>,<nav>,<main>,<section>,<footer>等标签，使结构清晰，利于 SEO 和可访问性。 - CSS3 现代样式: 包含 Flexbox/Grid 布局、过渡动画、渐变背景和自定义滚动条。
- 原生 JavaScript 实现动态效果: 无需依赖 jQuery，代码轻量且高效，包括：
- 平滑滚动导航
- 滚动触发动画
- 动态加载的导航栏
- 交互式模态框
- 响应式移动端菜单
- 响应式设计: 完美适配桌面、平板和手机等各种屏幕尺寸。
文件结构
为了保持项目整洁,我们使用以下文件结构：
（图片来源网络，侵删）
my-dynamic-website/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── (存放您的图片，logo.png, hero-bg.jpg 等)HTML 代码 (index.html)
这是网站的结构骨架,使用了 HTML5 语义化标签。
<!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="css/style.css">
<!-- 引入一个图标库，这里使用 Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- 导航栏 -->
<header id="navbar">
<div class="container">
<a href="#home" class="logo">我的Logo</a>
<nav class="nav-menu">
<a href="#home" class="nav-link">首页</a>
<a href="#about" class="nav-link">lt;/a>
<a href="#services" class="nav-link">服务</a>
<a href="#portfolio" class="nav-link">作品集</a>
<a href="#contact" class="nav-link">联系</a>
</nav>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<main>
<!-- 首页英雄区 -->
<section id="home" class="hero">
<div class="hero-content">
<h1>欢迎来到我的世界</h1>
<p>一个充满创意与技术的数字空间</p>
<a href="#about" class="cta-button">了解更多</a>
</div>
</section>
<!-- 关于我们 -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">关于我们</h2>
<div class="about-content">
<div class="about-text">
<p>我们是一支充满激情的团队，致力于创造卓越的数字体验，通过结合前沿技术和创新设计，我们帮助客户实现他们的愿景，并在数字世界中脱颖而出。</p>
<p>我们的使命是：简单、高效、富有创意地解决问题。</p>
</div>
<div class="about-image">
<img src="https://via.placeholder.com/500x300" alt="关于我们">
</div>
</div>
</div>
</section>
<!-- 服务 -->
<section id="services" class="services">
<div class="container">
<h2 class="section-title">我们的服务</h2>
<div class="services-grid">
<div class="service-card">
<i class="fas fa-code"></i>
<h3>网页开发</h3>
<p>从静态页面到复杂的单页应用，我们提供全栈网页开发解决方案。</p>
</div>
<div class="service-card">
<i class="fas fa-mobile-alt"></i>
<h3>响应式设计</h3>
<p>确保您的网站在任何设备上都能完美呈现，提供无缝的用户体验。</p>
</div>
<div class="service-card">
<i class="fas fa-paint-brush"></i>
<h3>UI/UX 设计</h3>
<p>以用户为中心，设计美观、直观且易用的界面。</p>
</div>
</div>
</div>
</section>
<!-- 作品集 -->
<section id="portfolio" class="portfolio">
<div class="container">
<h2 class="section-title">作品集</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="https://via.placeholder.com/400x300" alt="项目1">
<div class="portfolio-overlay">
<h3>项目名称 1</h3>
<p>项目简短描述</p>
<a href="#" class="project-link">查看详情</a>
</div>
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/400x300" alt="项目2">
<div class="portfolio-overlay">
<h3>项目名称 2</h3>
<p>项目简短描述</p>
<a href="#" class="project-link">查看详情</a>
</div>
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/400x300" alt="项目3">
<div class="portfolio-overlay">
<h3>项目名称 3</h3>
<p>项目简短描述</p>
<a href="#" class="project-link">查看详情</a>
</div>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">联系我们</h2>
<form id="contact-form">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="您的姓名" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="您的邮箱" required>
</div>
<div class="form-group">
<textarea id="message" name="message" rows="5" placeholder="您的留言" required></textarea>
</div>
<button type="submit" class="cta-button">发送消息</button>
</form>
</div>
</section>
</main>
<!-- 页脚 -->
<footer>
<div class="container">
<p>© 2025 我的公司. 保留所有权利.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
</footer>
<!-- JavaScript 文件 -->
<script src="js/script.js"></script>
</body>
</html>
CSS 代码 (css/style.css)
这是网站的样式表,负责美化外观和实现响应式布局。
/* --- 全局样式和变量 --- */
:root {
--primary-color: #007bff;
--secondary-color: #343a40;
--text-color: #333;
--light-bg: #f8f9fa;
--white: #ffffff;
--max-width: 1200px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth; /* 平滑滚动 */
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--white);
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3 {
font-weight: 700;
line-height: 1.2;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
position: relative;
color:
（图片来源网络，侵删）
