- 响应式设计：使用
viewport和媒体查询，完美适配各种手机屏幕。 - 现代 UI 框架：采用流行的 Tailwind CSS，可以快速构建美观的界面。
- 交互体验：使用原生 JavaScript 实现了平滑滚动、下拉菜单、返回顶部等常见交互。
- SEO 友好：使用了语义化的 HTML5 标签（如
<header>,<nav>,<main>,<section>,<footer>）。 - 图标支持：集成了 Font Awesome 图标库。
源码预览
这个手机网站是一个典型的企业产品展示网站,包含以下部分：
（图片来源网络，侵删）
- 顶部导航栏：带 Logo 和汉堡菜单（用于移动端）。
- 全屏英雄区：引人注目的主标题和行动号召按钮。
- 产品特色：以图标和文字展示三个核心优势。
- 产品展示：一个可水平滚动或网格布局的产品卡片区域。
- 客户评价：一个轮播展示的客户反馈区域。
- 页脚：包含联系方式和社交媒体链接。
如何使用
- 创建文件夹：在您的电脑上创建一个新文件夹，
mobile-website。 - 创建文件：在
mobile-website文件夹中创建以下四个文件：index.htmlstyle.cssscript.jsfavicon.ico(一个简单的图标文件，可以从网上下载一个占位符)
- 复制代码：将下面提供的代码分别粘贴到对应的文件中。
- 打开网页：用浏览器打开
index.html文件，您就可以看到效果了，为了更好地模拟手机，您可以按F12打开开发者工具，然后切换到“移动设备”视图。
文件 1: index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="这是一款面向移动设备的现代化产品展示网站。">我的移动网站</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">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="bg-gray-50">
<!-- Header / Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="text-xl font-bold text-blue-600">
<i class="fas fa-mobile-alt mr-1"></i> Logo
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="md:hidden text-gray-600 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
<!-- Desktop Menu -->
<nav class="hidden md:flex space-x-6">
<a href="#home" class="text-gray-700 hover:text-blue-600 transition">首页</a>
<a href="#features" class="text-gray-700 hover:text-blue-600 transition">特色</a>
<a href="#products" class="text-gray-700 hover:text-blue-600 transition">产品</a>
<a href="#testimonials" class="text-gray-700 hover:text-blue-600 transition">评价</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 transition">联系</a>
</nav>
</div>
<!-- Mobile Menu (Hidden by default) -->
<nav id="mobile-menu" class="hidden md:hidden bg-white border-t">
<a href="#home" class="block px-4 py-3 text-gray-700 hover:bg-gray-100 transition">首页</a>
<a href="#features" class="block px-4 py-3 text-gray-700 hover:bg-gray-100 transition">特色</a>
<a href="#products" class="block px-4 py-3 text-gray-700 hover:bg-gray-100 transition">产品</a>
<a href="#testimonials" class="block px-4 py-3 text-gray-700 hover:bg-gray-100 transition">评价</a>
<a href="#contact" class="block px-4 py-3 text-gray-700 hover:bg-gray-100 transition">联系</a>
</nav>
</header>
<main>
<!-- Hero Section -->
<section id="home" class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-20 md:py-32">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">欢迎来到未来</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto">体验我们革命性的产品，它将彻底改变您的生活方式。</p>
<a href="#products" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-gray-100 transition transform hover:scale-105">
立即探索
</a>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">核心特色</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-blue-500 text-4xl mb-4">
<i class="fas fa-rocket"></i>
</div>
<h3 class="text-xl font-semibold mb-2">极速体验</h3>
<p class="text-gray-600">采用最新技术，确保您的每一次操作都如丝般顺滑。</p>
</div>
<div class="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-green-500 text-4xl mb-4">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-semibold mb-2">安全可靠</h3>
<p class="text-gray-600">银行级别的加密技术，全方位保护您的隐私和数据安全。</p>
</div>
<div class="text-center p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-purple-500 text-4xl mb-4">
<i class="fas fa-heart"></i>
</div>
<h3 class="text-xl font-semibold mb-2">用户至上</h3>
<p class="text-gray-600">我们倾听每一个用户的声音，持续优化，只为最好的您。</p>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-20 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">我们的产品</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
<img src="https://via.placeholder.com/400x250" alt="产品 1" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">智能手表 Pro</h3>
<p class="text-gray-600 mb-4">集健康监测、消息通知、移动支付于一体。</p>
<a href="#" class="text-blue-600 font-medium hover:underline">了解更多 →</a>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
<img src="https://via.placeholder.com/400x250" alt="产品 2" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">无线耳机 Max</h3>
<p class="text-gray-600 mb-4">主动降噪，Hi-Fi音质，超长续航。</p>
<a href="#" class="text-blue-600 font-medium hover:underline">了解更多 →</a>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
<img src="https://via.placeholder.com/400x250" alt="产品 3" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">智能家居 Hub</h3>
<p class="text-gray-600 mb-4">一键控制全屋设备，打造您的智慧生活。</p>
<a href="#" class="text-blue-600 font-medium hover:underline">了解更多 →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">客户评价</h2>
<div id="testimonial-carousel" class="relative max-w-4xl mx-auto">
<div class="testimonial-item bg-white p-8 rounded-lg shadow-md text-center">
<img src="https://via.placeholder.com/100x100" alt="客户头像" class="w-20 h-20 rounded-full mx-auto mb-4">
<p class="text-gray-600 italic mb-4">"这个产品彻底改变了我的工作方式，效率提升了不止一倍！强烈推荐！"</p>
<p class="font-semibold">- 张伟, 产品经理</p>
</div>
<!-- More testimonials can be added here and controlled by JS -->
</div>
<div class="flex justify-center mt-6 space-x-2">
<button class="dot w-3 h-3 rounded-full bg-blue-600"></button>
<button class="dot w-3 h-3 rounded-full bg-gray-300"></button>
<button class="dot w-3 h-3 rounded-full bg-gray-300"></button>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="contact" class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-semibold mb-4">关于我们</h3>
<p class="text-gray-400">我们是一家专注于创新和用户体验的科技公司。</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">联系方式</h3>
<p class="text-gray-400"><i class="fas fa-envelope mr-2"></i> contact@example.com</p>
<p class="text-gray-400"><i class="fas fa-phone mr-2"></i> +86 123 4567 8900</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">关注我们</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weixin text-2xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weibo text-2xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-2xl"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2025 我的公司. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition opacity-0 invisible">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Custom JavaScript -->
<script src="script.js"></script>
</body>
</html>
文件 2: style.css
/* 全局样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
}
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 防止移动端点击时出现半透明背景 */
* {
-webkit-tap-highlight-color: transparent;
}
/* 导航栏汉堡菜单动画 */
#mobile-menu-btn {
transition: transform 0.3s ease;
}
#mobile-menu-btn.active i {
transform: rotate(90deg);
}
/* 产品卡片悬停效果 */
.product-card:hover img {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}
/* 返回顶部按钮动画 */
#back-to-top {
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
#back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#back-to-top:not(.show) {
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
文件 3: script.js
document.addEventListener('DOMContentLoaded', function() {
// 1. 移动端菜单切换
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
this.classList.toggle('active');
});
// 点击菜单项后关闭移动端菜单
const mobileMenuLinks = mobileMenu.querySelectorAll('a');
mobileMenuLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
mobileMenuBtn.classList.remove('active');
});
});
// 2. 返回顶部按钮
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
// 如果页面滚动超过300px，显示按钮
if (window.pageYOffset > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 3. 简单的轮播图功能 (示例)
const dots = document.querySelectorAll('.dot');
const testimonialItems = document.querySelectorAll('.testimonial-item'); // 假设你有多个 .testimonial-item
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
// 这里是简单的演示，实际项目中需要更复杂的逻辑
console.log(`切换到第 ${index + 1} 个评价`);
// 更新点的样式
dots.forEach(d => d.classList.remove('bg-blue-600'));
dots.forEach(d => d.classList.add('bg-gray-300'));
dot.classList.remove('bg-gray-300');
dot.classList.add('bg-blue-600');
// 显示对应的评价项 (需要HTML中有多个项)
// testimonialItems.forEach(item => item.style.display = 'none');
// testimonialItems[index].style.display = 'block';
});
});
// 4. 可选：给导航栏链接添加高亮效果 (基于滚动位置)
// 这个功能稍微复杂，需要监听滚动并判断哪个区域在视口中
// 这里提供一个简化版，用于演示
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('nav a[href^="#"]');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - 200) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('text-blue-600');
if (link.getAttribute('href').slice(1) === current) {
link.classList.add('text-blue-600');
}
});
});
});
进阶和扩展建议
这份源码是一个很好的起点,您可以根据需要进行扩展：
- ：使用
fetchAPI 从后端服务器获取产品数据、客户评价等，实现内容的动态加载。 - 更复杂的轮播图：使用 Swiper.js 或 Owl Carousel 等专业库来实现功能更丰富的轮播效果，如自动播放、触摸滑动等。
- 表单验证与提交：在“联系我们”部分添加一个表单，并使用 JavaScript 进行前端验证，然后通过
fetch将数据发送到服务器。 - PWA (Progressive Web App)：添加
manifest.json和service worker，将您的网站转换成一个类 App 的体验，支持离线访问和添加到主屏幕。 - 动画效果：引入 AOS (Animate On Scroll) 库，让元素在滚动到视口时产生优雅的进入动画。
希望这份详细的源码和说明对您有帮助！
（图片来源网络，侵删）
