- 引人入胜的头部：带有背景视频/图片的导航栏。
- 电影展示区：以卡片形式展示热门电影,支持筛选功能。
- 区：展示即将上映的电影或精选推荐。
- 页脚：包含版权和社交媒体链接。
我们将使用 HTML5、Tailwind CSS（通过CDN引入，无需本地安装）和 JavaScript 来实现，代码结构清晰，注释详细,方便您理解和修改。
（图片来源网络，侵删）
最终效果预览
- 响应式设计：在桌面、平板和手机上都有良好的显示效果。
- 动态筛选：可以通过“全部”、“动作”、“科幻”、“动画”等标签筛选电影。
- 现代UI：使用了卡片、阴影、过渡动画等现代设计元素。
- 交互性：鼠标悬停有动画效果,筛选功能流畅。
第一步：创建 HTML 文件
创建一个名为 index.html 的文件,并将以下代码复制进去。
<!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 CDN -->
<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>
/* 自定义样式 */
.hero-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1489599843091-30c0b5d7ce48?q=80&w=2070&auto=format&fit=crop');
background-size: cover;
background-position: center;
background-attachment: fixed; /* 视差滚动效果 */
}
.movie-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.movie-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.filter-btn {
transition: all 0.2s ease;
}
.filter-btn.active {
background-color: #ef4444;
color: white;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- 导航栏 -->
<header class="fixed top-0 w-full bg-gray-900 bg-opacity-90 backdrop-blur-sm z-50">
<nav class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold">
<i class="fas fa-film text-red-500 mr-2"></i>光影世界
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="hover:text-red-500 transition">首页</a>
<a href="#" class="hover:text-red-500 transition">电影</a>
<a href="#" class="hover:text-red-500 transition">电视剧</a>
<a href="#" class="hover:text-red-500 transition">我的片单</a>
</div>
<div class="flex items-center space-x-4">
<button class="hover:text-red-500 transition">
<i class="fas fa-search text-xl"></i>
</button>
<button class="hover:text-red-500 transition">
<i class="fas fa-user text-xl"></i>
</button>
</div>
</div>
</nav>
</header>
<!-- 主横幅/英雄区 -->
<section class="hero-bg h-screen flex items-center justify-center mt-16">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-bold mb-4">探索无限精彩</h1>
<p class="text-xl md:text-2xl mb-8">发现最新、最热门的电影大片</p>
<a href="#movies" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg transition">
立即观看
</a>
</div>
</section>
<!-- 热门电影区 -->
<main id="movies" class="container mx-auto px-6 py-16">
<h2 class="text-4xl font-bold mb-8 text-center">热门电影</h2>
<!-- 筛选按钮 -->
<div class="flex flex-wrap justify-center gap-4 mb-10">
<button class="filter-btn active px-6 py-2 rounded-full border border-gray-600" data-filter="all">全部</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-600" data-filter="action">动作</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-600" data-filter="sci-fi">科幻</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-600" data-filter="animation">动画</button>
<button class="filter-btn px-6 py-2 rounded-full border border-gray-600" data-filter="drama">剧情</button>
</div>
<!-- 电影卡片网格 -->
<div id="movie-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
<!-- 电影卡片将通过 JavaScript 动态生成 -->
</div>
</main>
<!-- 即将上映区 -->
<section class="bg-gray-800 py-16">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold mb-8 text-center">即将上映</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="text-center">
<img src="https://via.placeholder.com/300x450" alt="电影海报" class="rounded-lg shadow-lg mx-auto mb-4">
<h3 class="text-xl font-semibold">星际迷航 4</h3>
<p class="text-gray-400">2025年12月</p>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/300x450" alt="电影海报" class="rounded-lg shadow-lg mx-auto mb-4">
<h3 class="text-xl font-semibold">复仇者联盟：新纪元</h3>
<p class="text-gray-400">2025年1月</p>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/300x450" alt="电影海报" class="rounded-lg shadow-lg mx-auto mb-4">
<h3 class="text-xl font-semibold">玩具总动员 5</h3>
<p class="text-gray-400">2025年3月</p>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/300x450" alt="电影海报" class="rounded-lg shadow-lg mx-auto mb-4">
<h3 class="text-xl font-semibold">沙丘 3</h3>
<p class="text-gray-400">2025年5月</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-black py-8">
<div class="container mx-auto px-6 text-center">
<div class="flex justify-center space-x-6 mb-4">
<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-instagram text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
</div>
<p class="text-gray-500">© 2025 光影世界. 保留所有权利.</p>
</div>
</footer>
<!-- JavaScript 代码 -->
<script>
// 电影数据
const movies = [
{ id: 1, title: '速度与激情11', genre: 'action', year: '2025', rating: 8.5, poster: 'https://via.placeholder.com/300x450' },
{ id: 2, title: '阿凡达：火之意志', genre: 'sci-fi', year: '2025', rating: 9.0, poster: 'https://via.placeholder.com/300x450' },
{ id: 3, title: '蜘蛛侠：多元宇宙2', genre: 'action', year: '2025', rating: 9.2, poster: 'https://via.placeholder.com/300x450' },
{ id: 4, title: '你的名字，续作', genre: 'animation', year: '2025', rating: 9.5, poster: 'https://via.placeholder.com/300x450' },
{ id: 5, title: '奥本海默', genre: 'drama', year: '2025', rating: 8.8, poster: 'https://via.placeholder.com/300x450' },
{ id: 6, title: '银河护卫队3', genre: 'sci-fi', year: '2025', rating: 8.7, poster: 'https://via.placeholder.com/300x450' },
{ id: 7, title: '疾速追杀4', genre: 'action', year: '2025', rating: 8.9, poster: 'https://via.placeholder.com/300x450' },
{ id: 8, title: '蜘蛛侠：纵横宇宙', genre: 'animation', year: '2025', rating: 9.1, poster: 'https://via.placeholder.com/300x450' },
{ id: 9, title: '芭比', genre: 'drama', year: '2025', rating: 7.9, poster: 'https://via.placeholder.com/300x450' },
{ id: 10, title: '变形金刚：超能勇士崛起', genre: 'action', year: '2025', rating: 7.5, poster: 'https://via.placeholder.com/300x450' },
{ id: 11, title: '流浪地球3', genre: 'sci-fi', year: '2027', rating: 'TBD', poster: 'https://via.placeholder.com/300x450' },
{ id: 12, title: '千与千寻：新旅程', genre: 'animation', year: '2025', rating: 'TBD', poster: 'https://via.placeholder.com/300x450' }
];
// 渲染电影卡片
function renderMovies(moviesToRender) {
const movieGrid = document.getElementById('movie-grid');
movieGrid.innerHTML = ''; // 清空现有内容
moviesToRender.forEach(movie => {
const movieCard = document.createElement('div');
movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg';
movieCard.dataset.genre = movie.genre; // 添加数据属性用于筛选
movieCard.innerHTML = `
<img src="${movie.poster}" alt="${movie.title}" class="w-full h-96 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">${movie.title}</h3>
<div class="flex justify-between items-center">
<span class="text-gray-400">${movie.year}</span>
<span class="text-yellow-500 font-bold">
<i class="fas fa-star mr-1"></i>${movie.rating}
</span>
</div>
</div>
`;
movieGrid.appendChild(movieCard);
});
}
// 筛选功能
const filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// 移除所有按钮的 'active' 类
filterButtons.forEach(btn => btn.classList.remove('active'));
// 为当前点击的按钮添加 'active' 类
button.classList.add('active');
const filter = button.dataset.filter;
if (filter === 'all') {
renderMovies(movies);
} else {
const filteredMovies = movies.filter(movie => movie.genre === filter);
renderMovies(filteredMovies);
}
});
});
// 初始加载所有电影
document.addEventListener('DOMContentLoaded', () => {
renderMovies(movies);
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>
如何使用和修改
- 保存文件：将以上所有代码复制并粘贴到一个新的文本文件中，将其命名为
index.html。 - 打开网页：在您的浏览器中直接打开这个
index.html文件,您就能看到完整的电影主题网页。 - ：
- ：修改
<title>标签中的文字。 - 导航链接：修改
<header>部分中的<a>标签文字和href属性。 - 主横幅：
- 修改
hero-bg的background-imageURL,换成您自己的电影背景图。 - 、副标题和按钮文字。
- 修改
- 电影数据：在
<script>标签内，找到const movies = [...]数组，您可以在这里添加、删除或修改电影信息（标题、类型、年份、评分、海报链接），海报链接可以使用任何图片的 URL。 - 即将上映：修改
<section class="bg-gray-800">部分的内容,替换为您想展示的电影。 - 页脚：修改
<footer>部分的文字和社交媒体链接。
- ：修改
- 自定义样式：如果您想调整颜色、间距等，可以修改
<style>标签内的 CSS，或者直接修改 HTML 元素的class属性（将bg-gray-900改为bg-black）。
技术要点说明
- HTML5 语义化标签：使用了
<header>,<nav>,<main>,<section>,<footer>等标签,使结构更清晰。 - Tailwind CSS：通过 CDN 引入，提供了强大的工具类来快速构建响应式布局和美观的UI,无需编写大量自定义CSS。
- JavaScript 动态渲染：电影卡片不是直接写在 HTML 里的，而是通过 JavaScript 读取
movies数组数据，动态生成并插入到页面中，这使得数据管理和页面分离,非常易于维护。 - 事件监听：为筛选按钮添加了
click事件监听器,实现了动态筛选功能。 - 响应式设计：使用 Tailwind 的
grid和flex类，结合断点（如sm:,md:,lg:）,确保了在不同屏幕尺寸下的良好布局。
这个源代码是一个功能齐全的起点，您可以根据自己的需求进行扩展和美化,祝您使用愉快！
（图片来源网络，侵删）
