- HTML5: 语义化标签构建页面结构。
- Tailwind CSS: 实用优先的 CSS 框架，用于快速构建美观的响应式界面。
- JavaScript (原生): 实现一些简单的交互功能，如移动端菜单切换和滚动效果。
网站预览
这是一个多页面的静态网站,包含以下部分：
（图片来源网络，侵删）
- 首页: 带有导航栏、引人注目的英雄区域、服务介绍、特色展示和页脚。
- 关于我们: 介绍公司或个人的详细信息。
- 服务: 详细列出的服务项目。
- 博客: 一个文章列表页面。
- 联系: 包含联系表单和联系信息。
桌面端预览:
移动端预览:
如何使用
- 下载代码: 将下面的所有代码复制并粘贴到您的代码编辑器中（如 VS Code）。
- 创建文件: 创建一个名为
index.html的文件，并将代码粘贴进去。 - 运行: 在浏览器中直接打开
index.html文件即可看到网站效果。 - 修改: 您可以根据需要修改
index.html中的文本、图片链接和颜色。
完整源代码 (index.html)
这个文件包含了所有页面（通过 section 和导航链接模拟）以及所需的内联 CSS 和 JavaScript。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的静态网站 - 首页</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 导航栏背景变化 */
.navbar-scrolled {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- 导航栏 -->
<nav id="navbar" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 bg-transparent">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-indigo-600">MyWebsite</a>
<!-- 桌面端菜单 -->
<div class="hidden md:flex space-x-8">
<a href="#home" class="nav-link hover:text-indigo-600 transition">首页</a>
<a href="#about" class="nav-link hover:text-indigo-600 transition">关于我们</a>
<a href="#services" class="nav-link hover:text-indigo-600 transition">服务</a>
<a href="#blog" class="nav-link hover:text-indigo-600 transition">博客</a>
<a href="#contact" class="nav-link hover:text-indigo-600 transition">联系我们</a>
</div>
<!-- 移动端菜单按钮 -->
<button id="mobile-menu-button" class="md:hidden focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
<a href="#home" class="block py-2 hover:text-indigo-600 transition">首页</a>
<a href="#about" class="block py-2 hover:text-indigo-600 transition">关于我们</a>
<a href="#services" class="block py-2 hover:text-indigo-600 transition">服务</a>
<a href="#blog" class="block py-2 hover:text-indigo-600 transition">博客</a>
<a href="#contact" class="block py-2 hover:text-indigo-600 transition">联系我们</a>
</div>
</div>
</nav>
<!-- 首页部分 -->
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-indigo-500 to-purple-700 text-white">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">欢迎来到我们的世界</h1>
<p class="text-xl md:text-2xl mb-10 max-w-2xl mx-auto">我们致力于提供最优质的服务，为您创造卓越的数字体验。</p>
<div class="space-x-4">
<a href="#contact" class="inline-block bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">立即联系</a>
<a href="#services" class="inline-block border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition">了解更多</a>
</div>
</div>
</section>
<!-- 关于我们部分 -->
<section id="about" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">关于我们</h2>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<img src="https://via.placeholder.com/600x400" alt="关于我们" class="rounded-lg shadow-lg">
</div>
<div class="md:w-1/2 md:pl-12">
<h3 class="text-2xl font-semibold mb-4">我们的故事</h3>
<p class="mb-4 text-gray-600">
成立于2025年，我们是一家充满激情和创新精神的技术公司，我们的团队由来自世界各地的顶尖人才组成，共同致力于将最前沿的技术转化为对客户有价值的解决方案。
</p>
<p class="mb-6 text-gray-600">
我们相信，好的设计不仅仅是美观，更是功能与体验的完美结合，我们倾听客户的需求，用专业的知识和无限的创意，为每一个项目量身定制最佳方案。
</p>
<div class="grid grid-cols-2 gap-4">
<div class="text-center p-4 bg-indigo-50 rounded-lg">
<i class="fas fa-users text-3xl text-indigo-600 mb-2"></i>
<h4 class="font-bold">50+</h4>
<p class="text-sm text-gray-600">团队成员</p>
</div>
<div class="text-center p-4 bg-indigo-50 rounded-lg">
<i class="fas fa-project-diagram text-3xl text-indigo-600 mb-2"></i>
<h4 class="font-bold">200+</h4>
<p class="text-sm text-gray-600">完成项目</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 服务部分 -->
<section id="services" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">我们的服务</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- 服务卡片 1 -->
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition">
<div class="text-indigo-600 text-4xl mb-4">
<i class="fas fa-paint-brush"></i>
</div>
<h3 class="text-xl font-semibold mb-4">UI/UX 设计</h3>
<p class="text-gray-600">我们专注于创造直观、美观且用户友好的界面设计，确保您的产品在视觉和交互上都能脱颖而出。</p>
</div>
<!-- 服务卡片 2 -->
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition">
<div class="text-indigo-600 text-4xl mb-4">
<i class="fas fa-code"></i>
</div>
<h3 class="text-xl font-semibold mb-4">前端开发</h3>
<p class="text-gray-600">使用最新的 HTML, CSS, JavaScript 框架，构建高性能、响应式的网站和 Web 应用程序。</p>
</div>
<!-- 服务卡片 3 -->
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition">
<div class="text-indigo-600 text-4xl mb-4">
<i class="fas fa-mobile-alt"></i>
</div>
<h3 class="text-xl font-semibold mb-4">移动应用开发</h3>
<p class="text-gray-600">为 iOS 和 Android 平台开发原生或跨平台移动应用，让您的业务触手可及。</p>
</div>
</div>
</div>
</section>
<!-- 博客部分 -->
<section id="blog" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">最新博客</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 博客文章 1 -->
<article class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
<img src="https://via.placeholder.com/400x250" alt="博客图片" class="w-full h-48 object-cover">
<div class="p-6">
<div class="text-sm text-indigo-600 mb-2">2025年10月26日</div>
<h3 class="text-xl font-semibold mb-3">响应式设计的最佳实践</h3>
<p class="text-gray-600 mb-4">在当今多设备的世界里，响应式设计不再是可选项，而是必需品，本文将探讨如何创建完美的跨设备体验...</p>
<a href="#" class="text-indigo-600 font-semibold hover:underline">阅读更多 →</a>
</div>
</article>
<!-- 博客文章 2 -->
<article class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
<img src="https://via.placeholder.com/400x250" alt="博客图片" class="w-full h-48 object-cover">
<div class="p-6">
<div class="text-sm text-indigo-600 mb-2">2025年10月20日</div>
<h3 class="text-xl font-semibold mb-3">JavaScript 新特性解析</h3>
<p class="text-gray-600 mb-4">ES2025 带来了许多令人兴奋的新功能，从新的数组方法到顶层 `await`，让我们一起探索如何利用它们...</p>
<a href="#" class="text-indigo-600 font-semibold hover:underline">阅读更多 →</a>
</div>
</article>
<!-- 博客文章 3 -->
<article class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition">
<img src="https://via.placeholder.com/400x250" alt="博客图片" class="w-full h-48 object-cover">
<div class="p-6">
<div class="text-sm text-indigo-600 mb-2">2025年10月15日</div>
<h3 class="text-xl font-semibold mb-3">提升网站性能的 5 个技巧</h3>
<p class="text-gray-600 mb-4">网站速度直接影响用户体验和 SEO 排名，这里分享 5 个经过验证的技巧，帮助您显著提升网站加载速度...</p>
<a href="#" class="text-indigo-600 font-semibold hover:underline">阅读更多 →</a>
</div>
</article>
</div>
</div>
</section>
<!-- 联系我们部分 -->
<section id="contact" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">联系我们</h2>
<div class="flex flex-col lg:flex-row">
<div class="lg:w-1/2 lg:pr-12 mb-10 lg:mb-0">
<h3 class="text-2xl font-semibold mb-6">让我们开始合作吧</h3>
<p class="mb-8 text-gray-600">
无论您有任何问题、想法或项目需求，我们都很乐意听到，请填写下面的表单，我们的团队将在24小时内与您联系。
</p>
<div class="space-y-4">
<div class="flex items-center">
<i class="fas fa-map-marker-alt text-indigo-600 text-xl w-8"></i>
<span>北京市朝阳区建国路88号</span>
</div>
<div class="flex items-center">
<i class="fas fa-phone text-indigo-600 text-xl w-8"></i>
<span>+86 138 0013 8000</span>
</div>
<div class="flex items-center">
<i class="fas fa-envelope text-indigo-600 text-xl w-8"></i>
<span>contact@mywebsite.com</span>
</div>
</div>
</div>
<div class="lg:w-1/2">
<form id="contact-form" class="bg-white p-8 rounded-lg shadow-lg">
<div class="mb-6">
<label for="name" class="block text-gray-700 font-semibold mb-2">您的姓名</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 font-semibold mb-2">电子邮箱</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 font-semibold mb-2">留言内容</label>
<textarea id="message" name="message" rows="5" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600"></textarea>
</div>
<button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">发送消息</button>
</form>
<div id="form-message" class="mt-4 p-4 rounded-lg hidden"></div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h2 class="text-2xl font-bold">MyWebsite</h2>
<p class="text-gray-400 mt-2">© 2025 版权所有.</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// 移动端菜单切换
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// 点击菜单项后关闭移动端菜单
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
// 平滑滚动到锚点并更新活动链接
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 - 80, // 考虑固定导航栏的高度
behavior: 'smooth'
});
}
});
});
// 联系表单提交处理
const contactForm = document.getElementById('contact-form');
const formMessage = document.getElementById('form-message');
contactForm.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交行为
// 在实际应用中，这里会使用 AJAX 或 Fetch API 将表单数据发送到服务器
// fetch('/api/contact', { method: 'POST', body: new FormData(contactForm) })
// 模拟表单提交
formMessage.textContent = '感谢您的留言！我们会尽快与您联系。';
formMessage.className = 'mt-4 p-4 rounded-lg bg-green-100 text-green-700';
formMessage.classList.remove('hidden');
// 清空表单
contactForm.reset();
// 3秒后隐藏消息
setTimeout(() => {
formMessage.classList.add('hidden');
}, 3000);
});
</script>
</body>
</html>
代码结构解析
-
<head>部分:
（图片来源网络，侵删）- Meta 标签: 设置字符集和视口，确保网站在移动设备上正确显示。
- Tailwind CSS: 通过 CDN 引入，无需手动编译，快速构建样式。
- Font Awesome: 引入图标库，为网站添加丰富的图标。
- 自定义
<style>: 用于定义导航栏滚动时的样式和全局平滑滚动。
-
<body>部分:<nav>: 固定在顶部的导航栏，包含了网站 Logo、桌面端链接和移动端汉堡菜单。<section>: 每个部分（如首页、关于我们）都有一个唯一的id，用于导航链接和页面内锚点跳转。- 首页 (
#home): 使用渐变背景和大字体标题，吸引用户注意力。 - 关于我们 (
#about): 图文并茂地介绍公司或个人。 - 服务 (
#services): 使用卡片式布局展示服务项目。 - 博客 (
#blog): 展示文章列表，每个文章都有摘要和缩略图。 - 联系我们 (
#contact): 包含一个功能性的联系表单（前端模拟）和联系信息。
- 首页 (
<footer>: 网站的页脚，通常包含版权信息和社交媒体链接。
-
<script>部分:- 移动端菜单: 点击汉堡图标可以显示/隐藏移动端菜单。
- 导航栏滚动效果: 当页面滚动时，导航栏背景会变为半透明白色并添加阴影，提升可读性。
- 平滑滚动: 点击导航链接时，页面会平滑滚动到对应部分，而不是瞬间跳转。
- 表单提交: 模拟了表单提交功能，当用户点击发送后，会显示一个成功消息，然后清空表单。
如何扩展和定制
- : 直接修改 HTML 文件中的文本、图片
src属性和链接。 - 修改颜色: 在
<head>的<style>中修改indigo（靛蓝色）为你喜欢的颜色，或在 Tailwind 的类名中替换颜色代码（bg-blue-600）。 - 添加新页面: 复制一个
<section>，修改其id和内容，然后在导航栏中添加一个新的<a>链接到这个id。 - 部署: 这是一个纯静态网站，你可以直接将
index.html文件部署到任何静态网站托管服务上，如 Netlify, Vercel, GitHub Pages 或 阿里云 OSS 等，只需上传这个文件即可。
（图片来源网络，侵删）
